从JS Array向Google Maps添加标记

Question

我有数组：

var stops = [];
    stops[1] = {name:'One', lat:51.9219465100951 ,long:-8.61797176722262};
    stops[2] = {name:'Two', lat:51.9270744 ,long:-8.6105043};
    stops[3] = {name:'Three)', lat:51.9254898 ,long:-8.6100269};

我正在尝试遍历并在地图上显示这些标记...

function initMap() {
 map = new google.maps.Map(document.getElementById('map'), {
 center: {lat: 51.933596, lng:  -8.578540},
 zoom: 14,
 mapTypeId: 'hybrid'
});

for(var i=0; i<=stops.length; i++){
  var mypos = {stops[i].lat, stops[i].long};
  var marker = new google.maps.Marker({
   position: mypos,
   map: map,
   title: stops[i].name
  });
 }
}

地图上没有标记。

我在下一行收到[的意外令牌错误。 var mypos = {stops [i] .lat，stops [i] .lng};

我已对此进行了更改，但仍然无法正常工作。

Answer 1

当您真正需要做的只是通过stops[i] ，您正在创建一个无效的对象

var mypos = {stops[i].lat, stops[i].lng};

应该

var mypos =stops[i];

但是还有另一个问题，数组索引从零开始，但是您从一个开始

创建初始数组的一种简单得多的方法是

var stops = [
    {name:'One', lat:51.9219465100951 ,lng:-8.61797176722262},
    {name:'Two', lat:51.9270744 ,lng:-8.6105043},
    {name:'Three)', lat:51.9254898 ,lng:-8.6100269}
];

请注意，属性名称long已更改为lng以匹配地图脚本使用的属性

Answer 2

mypos必须是：

var mypos = {lat: stops[i].lat, lng: stops[i].long};

如果没有“ lat：”和“ lng：”，则试图将对象声明为数组。 'position'期望使用LatLngLiteral（请参见上文）或LatLng对象，其声明如下：

var mypos = new google.maps.LatLng(stops[i].lat, stops[i].long};

Answer 3

检查代码示例：

 $(window).load(function() { $(document).ready(function() { var map; var elevator; var myOptions = { zoom: 1, center: new google.maps.LatLng(0, 0), mapTypeId: 'terrain' }; map = new google.maps.Map($('#map_canvas')[0], myOptions); var addresses = ['Norway', 'Africa', 'Asia', 'North America', 'South America']; for (var x = 0; x < addresses.length; x++) { $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function(data) { var p = data.results[0].geometry.location var latlng = new google.maps.LatLng(p.lat, p.lng); new google.maps.Marker({ position: latlng, map: map }); }); } }); }); //]]> 

 <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> <style type="text/css"> #map_canvas { width: 500px; height: 500px; } </style> <div id="map_canvas"></div>