Google Maps API v3：将值传递给Listener函数（），以便在点击标记时创建一个圆圈？ [英] Google Maps API v3 : Passing values to Listener function(), so as to make a circle when the marker is clicked?

问题描述

所以，Listener被添加到标记中，并且函数需要作用于圆圈。

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

以下是我的代码：

  for（var j = 0 ; 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）;}）; //错误：circle [j]未定义
} 
  

错误：circle [j]未定义？ （在event.addListener行！）

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

如何这是正确的方式吗？请帮助！

解决方案

您有 j 的关闭问题。当你的函数被调用时， j 会引用在for循环中最后一个值 j 。因此， j 将会大于 circle 的大小 lat.length code>。解决方案是在生成回调函数时，强制 j 进行评估：



  function make_callback（circle，map）{
 return function（）{
 circle.setMap（map）; 
}; 
} 
  

然后，在您的循环中：

  google.maps.event.addListener（marker [j]，'click'，make_callback（circle [j]，map））; 
  

在单独的函数中包装回调生成将为您提供的值当你调用 make_callback 时，而不是调用回调函数时的值。

j 是对某个值的引用，它指向的值取决于您何时询问 j 它的价值是什么。当你像这样绑定一个函数时：

  google.maps.event.addListener（marker [j]，'click'，function （）{something（j）;}）; 
  

匿名函数不要求 j 它的价值是什么，直到函数被调用，函数只是记住它将使用 j 。当回调函数执行时，它会询问 j 获取当前值并使用它。这意味着两件事：

• 您在该循环中绑定的所有回调将使用相同的值 j 。


• j 将会 lat.length 因为这是在循环中 j 分配的最后一个值。





通过使用 make_callback 函数来构建回调函数，我们要求 j 作为它的值绑定回调。这只是一个强制 j 在它有我们想要的值时被评估的标准技巧。




I want to form a circle around the marker when the marker is clicked !

SO, Listener is added to marker and the function needs to act on the circle.

Here is my Code :

   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
            }

Error: circle[j] is undefined ?? (On the event.addListener line !)

Why.. it should be defined there ?

How to do this is the right way ? Please help !!

解决方案

You have a closure problem with j. When your function is called, j will reference the last value that j had in the for loop. So, j will be lat.length which is larger than the size of circle. The solution is to force j to be evaluated when generating the callback function:

function make_callback(circle, map) {
    return function() {
        circle.setMap(map);
    };
}

and then, in your loop:

google.maps.event.addListener(marker[j], 'click', make_callback(circle[j], map));

Wrapping the callback generation in a separate function will give you the value of circle[j] at the instant when you call make_callback rather than the value when the callback is called.

j is a reference to a value, the value that it points at depends on when you ask j what its value is. When you bind a function like this:

google.maps.event.addListener(marker[j], 'click', function() { something(j); });

The anonymous function doesn't ask j what its value is until the function is called, the function simply remembers that it is going to use j. When the callback function is executing, it will ask j for its current value and use that. This means two things:

• All the callbacks that you bound in that loop will use the same value of j.
• j will be lat.length as that's the last value that j was assigned during the loop.

By using the make_callback function to build the callbacks, we're asking j for its value at the time that we're binding the callback. This is just a standard trick to force j to be evaluated when it has the value we want.

这篇关于Google Maps API v3：将值传递给Listener函数（），以便在点击标记时创建一个圆圈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！