Google Maps API v3:将值传递给Listener函数(),以便在单击标记时创建圆圈?

Yug*_*dle 3 javascript google-maps google-maps-api-3 dom-events

我想在点击标记时围绕标记形成一个圆圈!

因此,监听器被添加到标记中,并且功能需要作用于圆圈.

这是我的代码:

   for(var j=0;j<lat.length;j++)
            {
                var pos = new google.maps.LatLng(lat[j],lng[j]);
                var marker_options = {position: pos, map:map, draggable:false};
                marker[j] = new google.maps.Marker(marker_options);
                circle_option = {strokeColor:"#FF0000",strokeOpacity:0.8,strokeWeight:2,fillColor:"#FF0000",fillOpacity:0.35,map:null,center:pos,radius:500};
                circle[j] = new google.maps.Circle(circle_option);
                google.maps.event.addListener(marker[j], 'click', function() {circle[j].setMap(map);});  // Error : circle[j] is undefined
            }
Run Code Online (Sandbox Code Playgroud)

错误:circle [j]未定义?(在event.addListener行上!)

为什么......应该在那里定义?

怎么做才是正确的方法?请帮忙 !!

mu *_*ort 10

你有一个关闭问题j.调用函数时,j将引用jfor循环中的最后一个值.因此,jlat.length比规模更大circle.解决方案是j在生成回调函数时强制进行评估:

function make_callback(circle, map) {
    return function() {
        circle.setMap(map);
    };
}
Run Code Online (Sandbox Code Playgroud)

然后,在你的循环中:

google.maps.event.addListener(marker[j], 'click', make_callback(circle[j], map));
Run Code Online (Sandbox Code Playgroud)

将回调生成包装在单独的函数中将为circle[j]您提供调用make_callback时的值,而不是调用回调时的值.

j是对值的引用,它指向的值取决于您何时询问j其值.绑定像这样的函数时:

google.maps.event.addListener(marker[j], 'click', function() { something(j); });
Run Code Online (Sandbox Code Playgroud)

在调用函数之前,匿名函数不询问j它的值是什么,该函数只记得它将使用它j.当回调函数执行时,它将询问j其当前值并使用它.这意味着两件事:

  • 您在该循环中绑定的所有回调将使用相同的值j.
  • j将是循环期间分配lat.length的最后一个值j.

通过使用make_callback函数来构建回调,j我们在绑定回调时要求它的值.这只是一个标准技巧,j当它具有我们想要的值时强制进行评估.