当点击处理程序添加到谷歌地图圆圈标记时，无法访问对象数据

Cannot access object data when click handler added to google maps circle marker

本文关键字：数据 对象 访问 处理 程序 添加 谷歌地图      更新时间：2024-01-23

当点击圆圈时，我正试图向HTML元素添加一些文本（存储在谷歌地图圆圈对象中）。圆已经被推入一个数组中，但当我循环该数组以给每个圆一个点击处理程序时，圆对象显示为未定义。有人能告诉我我做错了什么吗？谢谢

var pickUps = {};
pickUps["wickRailway"] = {
  center: new google.maps.LatLng(58.441801, -3.097043),
  name: "Wick Railway Station",
};
pickUps["fergusRd"] = {
  center: new google.maps.LatLng(58.443312, -3.095988),
  name: "St Fergus Road",
};
var map = new GoogleMap();
map.initialize();
var pickUpCircle;
function GoogleMap() {
  this.initialize = function() {
    var map = showMap();
  }
  var showMap = function() {
    var mapOptions = {
      zoom: 16,
      streetViewControl: false,
      center: new google.maps.LatLng(58.441245, -3.094398),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var circlesArray = [];
    for (var pickUp in pickUps) {
      var pickUpOptions = {
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillOpacity: 0,
        clickable: true,
        map: map,
        center: pickUps[pickUp].center,
        radius: 10,
        pickUpName: pickUps[pickUp].name
      };
      pickUpCircle = new google.maps.Circle(pickUpOptions);
      circlesArray.push(pickUpCircle);
    }
    for (var i = 0; i < circlesArray.length; i++) {
      //circlesArray[i] works here
      google.maps.event.addListener(circlesArray[i], 'click', function() {
        //circlesArray[i] is undefined here
      });
    };
    return map;
  }
}

如果您执行以下操作而不是，它是否有效

for (var i = 0; i < circlesArray.length; i++) {
  //circlesArray[i] works here
  var circ = circlesArray[i];
  google.maps.event.addListener(circ, 'click', function() {
    //circlesArray[i] is undefined 
    //what is circ here?
  });
};
相关文章：