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

试试这个：将var放在标记

前面

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 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>

Answer 2

我遇到了同样的问题和fixed it。看看我用过的代码。具体位是标记需要是一个数组，当你打开infowindow时，内容需要存储在标记数组中。我还建议您使用JSON代替，这样更容易解析而不是用'|'分隔。

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

2 个答案: