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

我工作的一个简单的PhoneGap应用程序 - 我来回踱步我家来收集坐标：如何在已加载地图后向Google地图添加标记？

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

我检查出其中的作品完美的documentation here。在那个例子中，当我创建initMap()时，我所理解的脚本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()，因为在完成之前我不知道它们是什么。我在这里做错了什么？

来源

2016-04-25 dsp_099

这是一个范围问题。在初始化地图时，您说的是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属性加载脚本时，您告诉浏览器等待整个页面加载完毕，然后加载脚本。在谷歌地图的情况下，在脚本的实际URL中，还可以传递加载脚本时要调用的函数的名称：&callback=initMap。

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

来源

2016-04-25 22:23:26 ChemicalRocketeer

我可能会看到问题 - 您宣布map两次，一次在initMap函数之外，一次在里面。这意味着全局变量map将保持为undefined。从转让前取下var：

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

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

另外，不要忘记它通常最好避免这些全局变量可能的时候:)

来源

2016-04-25 22:18:21

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

回答

相关问题