使用 API 在谷歌地图上放置标记[关闭]答案

【问题标题】：Using an API to place markers on google maps [closed]使用 API 在谷歌地图上放置标记[关闭]
【发布时间】：2018-04-23 10:24:03
【问题描述】：

在过去的几天里，我一直在尝试使用 Json 数据集在谷歌地图上放置标记。我在使用另一个数据集之前已经这样做了，我似乎无法找出我做错了什么。这是我正在使用的代码（也带有指向数据集的链接）我会喜欢一些输入，所以我可以找出问题所在。

function initMap() {
var xhr = new XMLHttpRequest();
var url = 'https://api.openchargemap.io/v2/poi/?output=json&countrycode=NO&maxresults=*';
xhr.open('GET', url, true);
xhr.onload = function () {
    xhr.Data = JSON.parse(this.response);
    if (this.status == 200) {
        xhr.Data.forEach(poi => {
        var map;
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 60.391011, lng: 5.325950},
            zoom: 4
        });
        for (var i = 0; i < poi.AddressInfo; i++) {
            var data = xhr.Data.poi[i],
                latLng = new google.maps.LatLng(data.AddressInfo.latitude, data.AddressInfo.longitude);

            //Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,

            });
        }
    })
    }
}
xhr.send();
}

【问题讨论】：

for (var i = 0; i < poi.AddressInfo; i++) { 你希望在这里发生什么？ poi.AddressInfo 是一个对象。
对...摆脱for()循环
for 循环的想法是能够遍历 API 的所有 POI 点以获取所有点，如果没有该循环，我将如何做到这一点？
我为您解决了一些问题。仔细查看map 变量的定义位置以及我如何访问纬度和经度（javascript 区分大小写）。 jsfiddle.net/x4gM4/674
“如果没有那个循环，我该怎么做” - 你已经在 forEach 循环中：xhr.Data.forEach(poi => { ... }

标签： javascript html json api google-maps

【解决方案1】：

您当前的代码存在一些问题。请参阅下面代码中编号的 cmets。

您应该在 forEach 循环 (2) 之外初始化您的地图。目前，您正在为每个 poi 重新初始化地图。
我已经完全删除了 for() 循环。您已经使用 forEach 循环了 poi，因此不需要 for 循环。
您已经拥有forEach(poi =>) 提供的poi 对象，因此无需使用var data = xhr.Data.poi[i] 来访问同一对象。
JavaScript 区分大小写。 AddressInfo 对象的 Longitude 和 Latitude 属性使用标题大小写，因此您必须使用标题大小写来访问属性。

function initMap() {
  var xhr = new XMLHttpRequest();
  var url = 'https://api.openchargemap.io/v2/poi/?output=json&countrycode=NO&maxresults=*';
  xhr.open('GET', url, true);
  xhr.onload = function() {
    xhr.Data = JSON.parse(this.response);

    // (1)
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 60.391011,
        lng: 5.325950
      },
      zoom: 4
    });

    if (this.status == 200) {

      // (2)
      xhr.Data.forEach(poi => {

        // (3)
        // (4)
        var latLng = new google.maps.LatLng(poi.AddressInfo.Latitude, poi.AddressInfo.Longitude);

        //Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
          position: latLng,
          map: map,

        });
      })
    }
  }
  xhr.send();
}

initMap();

#map {
  height: 300px;
  width: 600px;
  background-color: #CCC;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id="map"></div>

JSFiddle Example

【讨论】：