如何在点击Google Maps v3中的单独链接时激活现有标记以显示其信息?

时间:2012-11-09 07:27:44

标签: google-maps-api-3

我目前已经创建了标记,但我希望能够通过单击这些标记名称的单独列表来聚焦/显示标记的信息窗口。你是如何做到这一点的?我在网上找不到任何东西。

的javascript:

<script type="text/javascript"> 
  var infowindow;
  var locations = { 0: { lat: 32.42, long: -99.68,  name: 'Taylor Swift', info: '<b>Taylor Swift</b><br/><img src="http://www.8notes.com/images/artists/taylor_swift.jpg" width="50">' }, 
                    1: { lat: 35.42, long: -95.68,  name: 'Lady Gaga', info: '<b>Lady Gaga</b><br/><img src="http://images2.fanpop.com/images/photos/7500000/L-G-lady-gaga-7557892-500-500.jpg" width="50">' },
                    2: { lat: 37.78, long: -122.32, name: 'Selena Gomez', info: '<b>Selena Gomez</b><br/><img src="http://videokeman.com/image/pics/SelenaGomezsongPics1YnhHMtsn4mUdCM.jpg" width="50">' }  
                  }                       

  var myLatlng = new google.maps.LatLng(locations[0].lat,locations[0].long);
  var myOptions = 
  {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

   var map = new google.maps.Map(document.getElementById("map_container"), myOptions);
   var markerBounds = new google.maps.LatLngBounds();

   $.each(locations, function(key, value) 
   {          
        var location  = new google.maps.LatLng(value.lat,value.long);
      var marker = new google.maps.Marker({
         position: location, 
         map: map,         
         title:value.name        
      });    

      markerBounds.extend(location);
      map.fitBounds(markerBounds);                          
      attachSecretMessage(marker, value);
   });

function attachSecretMessage(marker,value) 
{         
   google.maps.event.addListener(marker, 'click', function() 
   {      
        if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow(
       { content: value.info,
         size: new google.maps.Size(50,50)
       });     

      infowindow.open(map,marker);
   });    
}  

  </script>

html body:

<body>

<a id="showTaylorSwiftInfoWindow" href="#">Taylor Swift</a>
<a id="showLadyGagaInfoWindow" href="#">Lady Gaga</a>
<a id="showSelenaGomezInfoWindow" href="#">Selena Gomez</a>

</body>

1 个答案:

答案 0 :(得分:1)

您需要将所有标记保存在数组中,以便搜索并找到相应的标记。完成后,您可以调用click事件处理程序,或者只需创建infowindow并像在事件处理程序中那样打开它。

但重要的是你将标记保存在数组中,因为这是你创建它们后能够再次引用它们的唯一方法。