通过提供地址在谷歌地图上显示多个标记

Question

我有以下脚本来使用谷歌地图 API，我必须创建一张具有多个标记（指向某物的气球形图标）的地图，并且我需要每个标记都指向地图的不同区域（即不同的坐标），我该怎么做？ 注意：我没有必须放置标记的区域的纬度和经度，而是有必须放置标记的区域的地址。

下面给出了在 Google 地图上显示多个标记的代码，但它无法按预期工作！

var map = null;
var geocoder = null;

function initializeNew() {
    var allAddress = document.getElementById("HiddenField1").value;
    var testary = new Array();
    testary = allAddress.split("|");

       if (GBrowserIsCompatible()) {
       //calls map to appear inside <div> with id, "map_canvas"
       map = new GMap2(document.getElementById("map_canvas"));

       //adds zoom and arrow controls to map
       //map.addControl(new GSmallMapControl());

       var marker = null;
       var i = 0;
       for (i = 0; i < testary.length; i++) {

           address = testary[i];

           geocoder = new GClientGeocoder();


           //converts a street address into geocode for the api 
           geocoder.getLatLng(
          address,
          function(point) {
              if (!point) {
                  alert(address + " not found");
              } else {
                  map.setCenter(point, 13);
                  marker = new GMarker(point);
                  map.addOverlay(marker);

                  map.setMapType(G_HYBRID_MAP);

                  //adds your own marker title and description in html
                  marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
                  //Add click event on push pin to open info window on click of the icon
                  GEvent.addListener(marker, "click", function() {
                  marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
              });
                  //Provides map,satellite,hybrid and terrain views in the map along with zoom control
                  map.setUIToDefault();
              }
          }
    )
      }


  }  
}

我已将项目组的地址存储在数组中，并循环以在地图中显示标记。这仅显示数组中最后一个地址的一个标记。请更正此代码或提供新代码，以便通过提供地址在 Google 地图中显示多个标记。

Answer 1

我遇到了完全相同的问题，并修复了该问题 。看看我用过的代码。具体来说，标记需要是一个数组，当您打开信息窗口时，内容需要存储在标记数组中。我还建议您使用 JSON 来代替，它更容易解析，而不是用“|”分隔。

Answer 2

前面

else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);

              map.setMapType(G_HYBRID_MAP);

              //adds your own marker title and description in html
              marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
              //Add click event on push pin to open info window on click of the icon
              GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
          });

试试这个：将 var 放在标记UPDATE

var geocoder = new GClientGeocoder();

var addresses = ["new york","chicago"];
var curIndex = 0;

function showAddress() {
  var _cur = addresses[curIndex];
  geocoder.getLatLng(
    _cur,
    function(point) {
      if (!point) {
        alert(_cur + " not found");
      } else {
        console.log(_cur+":"+point);
      }
      //do next after done
      curIndex++;
      if(curIndex<addresses.length)
        showAddress();
    }
  );
}

showAddress();
</script>