Question

我正在使用一个简单的手机应用程序 - 我在家里踱步以收集坐标：

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

我查看documentation here完美无缺的作品。在该示例中，创建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()，因为在我完成之前我还不知道它们是什么。我在这里做错了什么？

Answer 1

这是范围问题。初始化地图时，您说的是var map，它在initMap函数中创建了一个名为map的局部变量。这意味着全局map变量仍然未初始化，并且当您创建标记时，它并未将其放在地图上，因为您传递给标记的map变量未定义。移除var关键字，您的新地图将分配给该功能之外的原始全局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的作用。当您加载具有async和defer属性的脚本时，您告诉浏览器要等到整个页面都已加载，然后再加载脚本。对于谷歌地图，在脚本的实际网址中，您还会传递要在加载脚本时调用的函数名称：&callback=initMap。

因此，浏览器加载整个页面，然后获取谷歌地图脚本，然后执行谷歌地图脚本，获取谷歌地图代码，您可以使用，然后该代码调用initMap。

Answer 2

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

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

现在，您将把地图实例分配给功能范围之外的map变量，而不是创建与您的全局碰撞的新地图变量。

另外，如果可能的话，不要忘记它们通常更好地避免这些全局变量：）

如何在地图加载后向Google地图添加标记？

2 个答案: