从 JS 数组向 Google 地图添加标记答案

【问题标题】：Add Markers to Google Maps from JS Array从 JS 数组向 Google 地图添加标记
【发布时间】：2016-09-15 19:33:45
【问题描述】：

我有数组：

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

我已经改变了这个，但仍然无法让它工作。

【问题讨论】：

标签： javascript api

【解决方案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 以匹配地图脚本使用的内容

【讨论】：

@LinuxDisciple yes..in initial array..pointless using different property names

【解决方案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};

【讨论】：

感谢您更改为 LatLng 对象。它正确放置标记，但也显示错误：“未捕获的类型错误：无法读取未定义的属性 'lat'”
你的 for 循环看起来像是多跑了一轮。数组是零索引的，所以它首先到达停止[0]，这是未定义的。在你的 for 循环中使用 '

【解决方案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>

【讨论】：