Google マップ API を使用する小さな webapp に取り組んでいます。
ある時点で、マーカーを配置してイベント リスナーをアタッチしたいと考えていました。
//initialization of infowindow and markers
var points = [];
var infowindow = new google.maps.InfoWindow({
content: "1234"
});
function addInfoWindow(point){
infowindow.setContent(point.position + " " + point.title),
infowindow.open(map, point);
}
これが問題です。マーカーを開始するとき
//initialize markers
{% for marker in mapMarkers %}
points[{{ marker.id }}] = new google.maps.Marker({
position: new google.maps.LatLng({{ marker.geometry.y }},
{{ marker.geometry.x }}),
map: map,
title: '{{ marker.name }}',
clickable: true
});
//add event llistener for infowindow
points[{{ marker.id }}].content = "abc"
//look here!!
google.maps.event.addListener(points[{{ marker.id }}], 'click',
addInfoWindow(points[{{ marker.id }}])
);
{% endfor %}
最初のマーカーから情報ウィンドウが即座に表示されます。他のマーカーは配置されましたが、それらをクリックしても変化はありません。
私がこれをしたら
google.maps.event.addListener(points[{{ marker.id }}], 'click',
function(){
addInfoWindow(points[{{ marker.id }}])
});
スタッフは完全に正常に動作し、マーカーがクリックされたときにのみ情報ウィンドウが表示されます。
私の質問:なぜ使用する必要があるのですか
関数(){}addInfoWindow を直接使用する代わりに。addInfoWindow がグローバル変数を呼び出す関数呼び出しの問題である可能性があると考えましたが、その場合、表示される情報ウィンドウには、最後にインスタンス化されたマーカーからの情報が表示されるはずですよね?