GMaps API V3 - 多標記和信息窗口

我知道，這是一個經常性的，但...我有一個很大的問題，我的多個標記：他們都有相同的標題和相同的infowindow內容。GMaps API V3 - 多標記和信息窗口

我在很多網站上搜索過，但我沒有找到我的代碼中的問題在哪裏。我希望你能幫助我

這是我的代碼（我相信這是如此！）：

<script type="text/javascript"> 
      var map; 
      var geocoder; 
      $(document).ready(function() { 
       initializeMap(); 
      }); 


      function initializeMap() { 

       var people = [{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"SomeAddress","phone1":"00000000000","phone2":"","email":"[email protected]"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"[email protected]"}]; 


       var center = new google.maps.LatLng(40.667, -73.833); 

       var myOptions = { 
        zoom: 8, 
        center: center, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

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

       for (i = 0; i < people.length; i++) { 
        var p = people[i]; 



        geocoder.geocode({ 'address': p["address"]}, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          map.setCenter(results[0].geometry.location); 
          var marker = new google.maps.Marker({ 
           map:map, 
           draggable:false, 
           animation: google.maps.Animation.DROP, 
           title:p["lastname"] + " " + p["firstname"], 
           position: results[0].geometry.location 
          }); 


          var myWindowOptions = { 
           content: 
            '<h3>'+p["lastname"] + " " + p["firstname"]+'</h3>'+ 
            '<p>'+p["address"] 
          }; 

          var myInfoWindow = new google.maps.InfoWindow(myWindowOptions); 

          google.maps.event.addListener(marker, 'click', function() { 
           myInfoWindow.open(map,marker); 
          }); 
        }); 
       } 
      } 

</script>

我真的希望有人能告訴我我的錯誤（S）和非常感謝您的幫助！

不，我真的不明白，這應該是我沒有在我的代碼中看到：

<script type="text/javascript"> 
      var map; 
      var geocoder; 
      $(document).ready(function() { 
       initializeMap(); 
      }); 


      function initializeMap() { 

       var people = [{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"SomeAddress","phone1":"00000000000","phone2":"","email":"[email protected]"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"[email protected]"}]; 


       var center = new google.maps.LatLng(50.833, 25.000); 

       var myOptions = { 
        zoom: 8, 
        center: center, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

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



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

       var marker, i; 

       for (i = 0; i < people.length; i++) { 
        alert(people[i]['address']); 
        geocoder.geocode({ 'address': people[i]["address"]}, function(results, status) { 

         marker = new google.maps.Marker({ 
          position: results[0].geometry.location, 
          map: map 
         }); 

         google.maps.event.addListener(marker, 'click', (function(marker, i) { 
          return function() { 
           infowindow.setContent('<h3>'+people[i]["lastname"] + " " + people[i]["firstname"]+'</h3>'); 
           infowindow.open(map, marker); 
          } 
         })(marker, i)); 
        }); 
       } 

      } 
</script>

感謝您的幫助！ :)

來源

2011-07-28 Gerfaut

您必須存儲對所有標記和所有infowindows的引用。這是主要想法。這裏是我之前找到和使用的鏈接

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ 這是衆所周知的問題。有很多關於它的信息。嘗試搜索there。

我希望它會有幫助。

來源

2011-07-29 21:37:16

我也碰到過這個，我剛剛跑出來（一個相當混蛋的東西，imho）。

這裏的主要問題是異步geocoder.geocode（）函數：你正在編寫代碼的內聯回調在任意時間執行（谷歌用來回答你的請求的時間），它沒有任何東西與你的週期做。

出於這個原因，您我計數器變量通常會包含最後可能的值，因爲短爲週期執行比HTTP請求到達服務器，回來更快。

主要地，將溶液toghether此

GMaps JS Geocode: Using/Passing Variables With Asynchronous Geocode Function?

與此

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

組合從魯斯蘭Polutsygan指出。對我來說，真正的訣竅是保持geocoder回調之外的迭代操作。所以，這是「核心」：

function geocodeSite(site) { 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': site.place + ', IT'}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     site.position = results[0].geometry.location; 
     addMarker(site); 
    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
    }); 
} 

function addMarker(site) { 
    marker = new google.maps.Marker({ 
     map: map, 
     position: site.position, 
     animation: google.maps.Animation.DROP, 
     title: site.name 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(site.name); 
    infoWindow.open(map, this); 
    }); 
}

，這是我如何使用它：

<script type='text/javascript'> 
    var data = <?php print $geodata?>; 
    for (var i = 0; i < witaly_data.length; i++) { 
    geocodeSite(data[i]); 
    } 
</script>

其中數據爲i在服務器一側所產生的JSON變量，它包括一個名稱和地址（我們傳遞給地理編碼器的地址）。很顯然，你必須在其他地方初始化你的地圖（我在jquery document.ready（）中做），並將其聲明爲一個全局變量，就像infoWindow實例一樣。

來源

2012-09-24 20:34:21 brazorf

下面是示例代碼，我

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
<script> 
    var branches = '@Model.SerializedBranchesMapInfos'; //Info from server 

    function setMarker(map) { 
     if (branches != null && branches.length > 0) { 
      branches = branches.replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, "\""); 
      var branchesList = JSON.parse(branches); 

      for (var i = 0; i < branchesList.length; i++) { 
       addMarker(map, branchesList[i]); 
      } 
     } 
    } 

    function addMarker(map, branch) { 
     var infowindow = new google.maps.InfoWindow(); 
     var marker = new google.maps.Marker({ 
      position: { 
       lat: branch.Latitude, 
       lng: branch.Longitude 
      }, 
      map: map, 
      title: branch.branchCode 
     }); 

     var contentString = '<div><strong>' + branch.BranchCode + '</strong><br>' + 
           branch.Description + '</div>'; 

     google.maps.event.addListener(marker, 'click', function() { 
      if (contentString == infowindow.getContent()) { 
       infowindow.close(map, this); 
       infowindow.setContent(''); 
      } 
      else { 
       infowindow.setContent(contentString); 
       infowindow.open(map, this); 
      } 
     }); 
    } 

    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(3.872310, 108.160445), // Initiaize with Riau Islands coordinates 
      zoom: 6 
     }; 
     var map = new google.maps.Map(document.getElementById('gmap'), mapOptions); 
     setMarker(map); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

工作

來源

2014-11-10 09:57:10 bsting

GMaps API V3 - 多標記和信息窗口

回答

相關問題