使用邊欄點擊觸發谷歌地圖事件v3

仍然堅持這一個人可以請有人幫助取得了一些進展只是現在的信息窗口的問題。使用邊欄點擊觸發谷歌地圖事件v3

<div id="map"></div> 
<div id="sidebar"> 
    <h2>Sidebar</h2> 
</div> 


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript"> 
    var locations = [ 
     ['Bondi Beach', -33.890542, 151.274856, 4], 
     ['Coogee Beach', -33.923036, 151.259052, 5], 
     ['Cronulla Beach', -34.028249, 151.157507, 3], 
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
     ['Maroubra Beach', -33.950198, 151.259302, 1] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.890542, 151.274856), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    //console.log(infowindow); 

    var markers = []; 

    var marker = []; 


    var html = "<ul>"; 

    for (i = 0; i < locations.length; i++) { 

     //console.info(marker.position()); 


     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map, 
     icon: "http://lindsay-and-dan.gettingmarried.co.uk/images/maps/icon-music.gif" 
     }); 

     //console.log(marker); 

     var center = marker.position; 
     markers.push(marker); 
     console.log(markers[i]); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
      //console.log(marker.position); 
      map.panTo(center); 

     } 

     })(marker, i)); 

     //console.log(marker); 
     //console.log(locations[i][0]); 


     html += '<li><a href="#" class="move" map="' + markers[i].Oa + ',' + markers[i].Pa + ',' + locations[i][0] + '">' + locations[i][0] + '</a></li>'; 


    } 

    html += "</ul>"; 
    $('#sidebar').html(html).fadeIn('slow'); 

    $('.move').click(function(){ 

     //infowindow.close(); 

     var contents = $(this).attr('map'); 

     var array = contents.split(','); 

     var lon = array[0]; 
     var lat = array[1]; 
     var content = array[2]; 

     console.log(content); 


     infowindow.open(map, marker); 
     infowindow.setContent(content); 
     map.panTo(new google.maps.LatLng(lon,lat)); 


     return false; 
    }); 



</script>

這是測試示例的鏈接。

http://extwit.users35.interdns.co.uk/gmap/

任何建議???

來源

2011-08-23 DCHP

好吧，幫助你明確幫助我。你應標是這個樣子：

marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    Oa: locations[i][1], 
    Pa: locations[i][2], 
    map: map, 
    icon: "http://lindsay-and-dan.gettingmarried.co.uk/images/maps/icon-music.gif" 
    });

辦公自動化添加和霸。

希望這有助於

P.S：我剛纔注意到你的另一個問題與信息窗口本身。添加infowindow.open(map,marker);並且infowindow的定位關閉......對此不確定。

P.P.S .:您的$('.move')代碼塊需要在標記循環內;在此區域內，請將您的參考替換爲markers[i]。這應該爲你做！

來源

2011-08-24 23:54:19 Rudy

使用邊欄點擊觸發谷歌地圖事件v3

回答

相關問題