控制infowindow的谷歌地圖鏈接就像標記一樣

我想從一個對象數組中動態地創建一個鏈接列表，這個對象數組可以控制我Google地圖中標記的infowindow。控制infowindow的谷歌地圖鏈接就像標記一樣

比如我有一個數組稱爲企業和鏈接應顯示爲企業[0] .name和企業[1]。名稱等等

當你點擊鏈接，它會顯示信息框就像你點擊了標記一樣。我還設置了它，以便您單擊另一個標記，之前的信息框關閉，並打開新的標記。

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script src="http://code.jquery.com/jquery-1.5.js"></script> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 480px } 
</style> 
</head> 
<body> 
    <div id="map_canvas" style="width:620px; height:480px"></div> 

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 

    var infowindow; 

    (function(){ 
     google.maps.Map.prototype.markers = new Array(); 

     google.maps.Map.prototype.addMarker = function(marker){ 
      this.markers[this.markers.length] = marker; 
     } 

     google.maps.Map.prototype.getMarkers = function() { 
      return this.markers 
     } 

     google.maps.Map.prototype.clearMarkers = function() { 
      if(infowindow) { 
       infowindow.close(); 
      } 

      for(var i=0; i<this.markers.length; i++){ 
       this.markers[i].set_map(null); 
      } 
     } 

    })(); 

    var geocoder; 
    var map; 

    function initialize() { 
     geocoder = new google.maps.Geocoder(); 

     var businesses = new Array(); 
     business = { 
      name:"Columbia Gorge Blue Grass", 
      description:"July 22-25, 2010 at the Skamania County Fairgrounds", 
      address:codeAddress("1003 south 6th Ave, Kelso WA 98626"), 
      lat:46.72, 
      lng:-119.55, 
      url:"http://www.columbiagorgebluegrass.net/", 
      business_type:"Getaway" 
     }; 
     businesses[0] = business; 

     business = { 
      name:"Chips Casino Palace", 
      description:"We Deal in Fun! La Center, WA", 
      lat:45.72, 
      lng:-121.55, 
      url:"http://www.chipscasino.com/", 
      business_type:"Golf" 
     }; 
     businesses[1] = business; 

     business = { 
      name:"Skamania County Fair & Timber Carnival", 
      description:"August 11-15, 2010 at the Skamania County Fairgrounds", 
      lat:45.50, 
      lng:-122.55, 
      url:"http://www.chipscasino.com/", 
      business_type:"Wine" 
     }; 
     businesses[2] = business; 

     //This is where the map positions to when the page is loaded 
     var latlng = new google.maps.LatLng(46.88, -120.00); 
     var myOptions = { 
      zoom: 6, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

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

     for (var i = 0; i < businesses.length; i++) { 
      //alert(i); 
      if(businesses[i].business_type == "Wine"){ 
       //http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00CC99|000000 
       var icon = 'http://google-maps-icons.googlecode.com/files/wineyard.png'; 
      }else if(businesses[i].business_type == "Golf"){ 
       var icon = 'http://google-maps-icons.googlecode.com/files/golf.png'; 
      }else{ 
       var icon = 'http://google-maps-icons.googlecode.com/files/festival.png'; 
      } 

      var latlng = new google.maps.LatLng(businesses[i].lat, businesses[i].lng); 
      map.addMarker(createMarker(businesses[i].name,latlng)); 
     } 

     function createMarker(name, latlng) { 
      var marker = new google.maps.Marker({ 
      position:latlng, 
      map: map, 
      icon: icon, 
     }); 

     google.maps.event.addListener(marker, "click", function() { 
      if (infowindow) infowindow.close(); 
      infowindow = new google.maps.InfoWindow({content: name}); 
      infowindow.open(map, marker); 
      console.log(); 
     }); 


     return marker; 
     } 


    function codeAddress(address) { 
     var this_address = address; 
     geocoder.geocode({ 'address': this_address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      return results[0].geometry.lat; 
      } else { 
      alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
     }  


     } 


     $(document).ready(function(){ 
      initialize();  
     }); 

    </script> 
</body> 
</html>

我不知道我是否需要添加另一個事件偵聽或添加一個函數調用還是什麼。

任何幫助，將不勝感激。

謝謝！

來源

2011-04-29 bigmike7801

您可以保留一個商家ID的查詢數組，以指示不同企業的經營情況。當你點擊一個鏈接時，它也會有一個商業ID。然後你可以得到正確的latlng，然後調用「新的InfoWindow（）」作爲選項的一部分傳入適當的「位置」：http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindowOptions

來源

2011-04-29 23:19:57

你能給我一個代碼示例嗎？我不太確定我是否遵守。謝謝！ – bigmike7801 2011-04-29 23:53:51

控制infowindow的谷歌地圖鏈接就像標記一樣

回答

相關問題