如何在地图加载后向谷歌地图添加标记

How to add markers to Google Maps after the map has already been loaded?

本文关键字：谷歌地图 添加 加标记 加载 地图      更新时间：2023-09-26

我正在开发一个简单的PhoneGap应用程序 - 我在家里踱步收集坐标：

var positions = [
  {lat:123.12313123, lng:123.123345131},
  {lat:123.12313123, lng:123.123345131}
]

我正在查看此处的文档，该文档完美无缺。在该示例中，脚本defer async我所理解的内容在创建initMap()时触发。 initMap()有一个标记。这在我的应用程序中完美运行，在 Straya 中显示标记。

首先，我创建地图：

var map; // making it global
  function initMap() {
    var myLatLng = {lat: 39.909736, lng: -98.522109}; // center US
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: myLatLng
    });
  }

这将绘制地图。现在，我想像这样遍历我的坐标：

// Remember, the map has already loaded at this point
$(positions).each(function(i, item) {
          var marker = new google.maps.Marker({
            position: item,
            map: map,
            title: 'Route item ' + i
          });
        })

这行不通。我不能在循环中运行initMap()，而且无论如何它都不起作用。我不能使用预设数量的坐标运行initMap()，因为在我完成之前我还不知道它们是什么。我在这里做错了什么？

这是一个范围问题。当你初始化map时，你说的是var map，这会在initMap函数中产生一个名为map的局部变量。这意味着全局map变量仍未初始化，并且当您创建标记时，它不会将其放在地图上，因为您传递给标记的map变量未定义。删除 var 关键字，您的新 Map 将被分配给函数外部的原始全局map变量，如下所示：

var map; // making it global
  function initMap() {
    myLatLng = {lat: 39.909736, lng: -98.522109}; // center US
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: myLatLng
    });
  }

同样作为一个不相关的说明，我认为您误解了异步延迟的作用。当您加载具有async和defer属性的脚本时，您告诉浏览器等待整个页面加载完毕，然后加载脚本。在谷歌地图的情况下，在脚本的实际网址中，您还会传递加载脚本时要调用的函数的名称：&callback=initMap 。

因此，浏览器加载整个页面，然后获取谷歌地图脚本，然后执行谷歌地图脚本，该

脚本使谷歌地图代码全部准备就绪供您使用，然后该代码调用initMap。

我可能会看到问题 - 您声明map两次，一次在initMap函数外部，一次在内部。这意味着全局map变量将保持undefined。从作业前面删除var：

map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: myLatLng
    });

现在，您将把映射实例分配给函数作用域之外的map变量，而不是创建一个与全局变量冲突的新映射变量。

另外，不要忘记，尽可能避免使用这些全局变量通常更好:)

相关文章：