addDomListener事件逻辑?

时间:2013-09-10 07:42:47

标签: javascript html5 google-maps

我有以下代码

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

我想在每个圆圈上绘制一个带有两个圆圈和一个事件的地图,但问题是点击事件会为两个圆圈提供相同的值!它给出了两个圈子的第二个城市的城市名称!也许是因为它在for循环中所以Circle对象总是取最后一个值。 我尝试使用带有switch语句或IF ELSE的函数,但它不起作用!!!

请帮忙解决这个问题。

1 个答案:

答案 0 :(得分:0)

在匿名函数中,您关闭城市变量,但不断更改城市变量的值。你需要冻结它,最简单的方法是将它作为函数的参数。

google.maps.event.addDomListener(Circle, 'click', (function (city) {
  return function() {
    alert(mapcity[city].name);
  }
})(city));