javascript - map 加载后如何向 Google map 添加标记？

Question

我正在开发一个简单的phoneGap应用程序 - 我在我的房子周围踱步以收集坐标:

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

我正在查看 documentation here效果完美。在该示例中，根据我的理解，脚本 defer async 在创建 initMap() 时触发。 initMap() 有一个标记。这在我的应用程序中完美运行，在 Straya 中显示标记。

首先，我创建 map :

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
    });
  }

这会绘制 map 。现在，我想像这样迭代我的坐标:

// 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

这是一个范围问题。当您初始化 map 时，您会说 var map，它会在 initMap 函数内创建一个名为 map 的局部变量。这意味着全局 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 的作用。当您使用 async 和 defer 属性加载脚本时，您是在告诉浏览器等待整个页面加载完毕，然后再加载脚本。对于谷歌地图，在脚本的实际 URL 中，您还可以传递加载脚本时要调用的函数名称:&callback=initMap。

因此，浏览器加载整个页面，然后获取谷歌地图脚本，然后执行谷歌地图脚本，该脚本让谷歌地图代码准备好供您使用，然后该代码调用 initMap .