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

Question

我正在使用一个简单的phoneGap应用程序-我在房子周围步调以收集坐标：

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

我正在检查这里的文档，这些文档可以正常工作。 在该示例中，脚本在创建initMap()时将defer async我所理解的defer async 。 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将被分配给函数外部的原始全局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属性的脚本时，您是在告诉浏览器等待，直到整个页面都已加载，然后再加载该脚本。 对于google maps，在脚本的实际URL中，您还传递了加载脚本时要调用的函数的名称： &callback=initMap 。

因此，浏览器将加载整个页面，然后获取google maps脚本，然后执行google maps脚本，该脚本将所有google maps代码准备就绪供您使用，然后该代码调用initMap 。

Answer 2

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

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

现在，您将在功能范围之外将map实例分配给map变量，而不是创建一个与全局冲突的新map变量。

另外，请不要忘记通常最好避免使用这些全局变量：）