-1

Google Maps 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();
              }
          }
    )
      }


  }  
}

アイテムのグループのアドレスを配列に格納し、ループしてマップにマーカーを表示しました。これにより、配列に存在する最後のアドレスのマーカーが1つだけ表示されます。このコードを修正するか、アドレスを指定してGoogleマップに複数のマーカーを表示するための新しいコードを指定してください。

4

2 に答える 2

0

これを試してください：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>
于 2010-11-01T09:59:40.887 に答える
0

I ran into this exact same problem and fixed it. Look at the code that I have used. The specific bits are that marker needs to be an array and when you open the infowindow the content needs to be stored in the marker array. I would also suggest that you use something JSON instead which is easier to parse instead of separating with '|'.

于 2010-11-01T13:00:04.783 に答える