3

Javascript API v3 を使用して、Google マップに複数のマーカーを配置する方法を知りたいです。

ここに投稿された解決策を試しましたが、何らかの理由でうまくいきません:

var directionDisplay;

function initialize() {        
  var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  setMarkers(map, properties);

  var properties = [
    ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
  ];

  function setMarkers(map, buildings) {
    var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
    var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
    var bounds = new google.maps.LatLngBounds;
    for (var i in buildings) {
      var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]);
      bounds.extend(myLatLng);
      var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] });
      google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); });
    }
    map.fitBounds(bounds);  
  }
}
</script>

なぜこれがうまくいかないのか、誰か親切に説明してもらえますか？

4

1 に答える 1

3

この質問はすでに数か月前のものですが、未回答のままであることに気付きました. OPはすでにこれを解決する方法を見つけたと思いますが、完全を期すために答えを試してみましょう。

上記のコードにいくつかの重大な問題を見つけることができます。

  1. まず、定義される前にproperties配列をsetMarkers()関数に渡そうとしていますproperties。したがって、 は 2 番目の引数setMarkers()を受け取りundefinedます。これが、マップに何も表示されていない理由です。

  2. 次に、そのループで非常に一般的な閉鎖の問題が発生しています。for inクロージャーに囲まれた変数は同じ単一の環境を共有するため、clickからのコールバックaddListenerが呼び出されるまでに、ループはそのコースを実行し、i変数はループ終了時の最後の値を指したままになります。

  3. さらに、配列リテラルにカンマがぶら下がっているため、一部のブラウザーでは構文エラーが発生する可能性があります。

properties最初の問題を解決するには、を呼び出す前に配列を定義するだけですsetMarkers()。

var properties = [
  ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
];

setMarkers(map, properties);

次に、関数ファクトリを使用して、さらに多くのクロージャーでクロージャーの問題を解決できます。

function makeClickCallback(buildings, i) {  
   return function() {  
      window.location = ('detail?b=' + buildings[i][3]);
   };  
} 

for (var i in buildings) {
   // ...

   google.maps.event.addListener(marker, 'click', 
                                 makeClickCallback(buildings, i);
}

クロージャーの仕組みに慣れていない場合、これは非常にトリッキーなトピックになる可能性があります。簡単な紹介については、次の Mozilla の記事をご覧ください。

次に、配列リテラルのぶら下がっているコンマを確実に削除することをお勧めします。

var properties = [
  ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4']  // no comma
];

さらに、配列には要素がproperties1 つしかないため、マップ上にマーカーが 1 つしか表示されないことに注意してください。この例のために他の要素が削除されたかどうかはわかりませんが、削除されていない場合は、次のように場所を追加してください。

var properties = [
  ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
  ['Another Location',50.505050,-75.505050,'Mjg5']
];
于 2010-08-08T23:44:35.477 に答える