次のコードがあります
function init() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(31.949454, 35.932913),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
debugger;
var mapcity = {};
mapcity['amman'] = {
center: new google.maps.LatLng(31.949454, 35.932913),
population: 50000,
name: 'Amman'
};
mapcity['zarqa'] = {
center: new google.maps.LatLng(33.79, 33.39),
population: 100000,
name: 'Zarqa'
};
for (var city in mapcity) {
var cityInfo = {
strokeWeight: 2,
fillColor: 'cyan',
center: mapcity[city].center,
radius: mapcity[city].population,
map: map,
strokeOpacity: 0.8,
fillOpacity: 0.3,
}
Circle = new google.maps.Circle(cityInfo)
google.maps.event.addDomListener(Circle, 'click', function () {
alert(mapcity[city].name);
});
}
};
google.maps.event.addDomListener(window, 'load', init);
2 つの円と各円に 1 つのイベントを含むマップを描画したいのですが、クリック時のイベントが両方の円に同じ値を与えるという問題があります。両方のサークルの 2 番目の都市の都市名を指定します!!! おそらく、for ループ内にあるため、Circle オブジェクトは常に最後の値を取得します。switch文やIF ELSEで関数を使ってみたのですがうまくいきません!!!
これについて助けてください。