使用API​​在谷歌地图上放置标记

Question

最后几天我一直试图使用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();
}

Answer 1

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

1. 您应该在forEach循环（2）之外初始化地图。目前，您正在为每个poi重新初始化您的地图。

2. 我完全删除了for()循环。你已经使用forEach在poi上循环，所以for循环是不必要的。

3. poi已提供forEach(poi =>)个对象，因此无需使用var data = xhr.Data.poi[i]来访问同一个对象。

4. JavaScript区分大小写。 Longitude对象的Latitude和AddressInfo属性使用标题大小写，因此您必须使用标题大小写来访问属性。

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