使用回调功能在谷歌地图上放置多个标记

Place multiple markers on google map with callback function

本文关键字：回调 功能 谷歌地图      更新时间：2023-09-26

我想在Gmap API上实现一个功能，如果缩放比例超过17，则显示所有标记（否则，只需隐藏它们）。但是，当我编写如下代码时，它只是不起作用。

PS：代码在语法和排列上可能并不完全正确，但它表达了我的意思

// @latlong is an array of tuple (latitude , longtitude)
// @myMap is the google map object passed to the function
function placeMarker( myMap , latlon)
{
  for(var i = 0 ; i < latlon.length ; i ++)
  {
     myMarker = new google.maps.Marker( {
        position: new google.maps.LatLng(latlon[i][0], latlon[i][1])
     });
     google.maps.event.addListener(myMap, 'zoom_changed', function() {
      zoomLevel = myMap.getZoom()       
      if(zoomLevel >= 17)
      {
        myMarker.setMap(myMap)
      }
      else
      {
        myMarker.setMap(null)
      }
  });

}
}

我只是将我的代码更改为：

function placeMarker( myMap , latlon)
{
  for(var i = 0 ; i < latlon.length ; i ++)
  {
     myMarker = new google.maps.Marker( {
        position: new google.maps.LatLng(latlon[i][0], latlon[i][1])
     });
     (function(myMarker_copy){
         google.maps.event.addListener(myMap, 'zoom_changed', function() {
          zoomLevel = myMap.getZoom()       
          if(zoomLevel >= 17)
          {
            myMarker_copy.setMap(myMap)
          }
          else
          {
            myMarker_copy.setMap(null)
          }
      });
      }(myMarker));

}
}

第二个版本有效。我知道如何让它工作，但是，我真的不知道为什么它有效，为什么另一个不工作。也许这与JS的函数闭包或参数传递原则有关（我检查了很多参考资料，但其中一些只是持有不同的想法）。有人可以帮我吗？

真的很感激。

第一个不起作用的例子：有一个全局变量myMarker和许多事件侦听器，它们最后都在一个标记上运行，这就是在循环中最后一个创建的标记。

第二个确实有效的示例：由于闭包，每个事件侦听器都会接收自己的标记变量的本地副本。因此，当调用事件侦听器时，它具有正确的标记值。

相关文章：