javascript - For 循环未将数组中的文本放入 InfoWindows Google Maps API

Question

我正在运行一个 for 循环来遍历所有国家，并用世界银行 API 的 GDP 进行标记。

我能够运行 for 循环并从 Google map 地理编码中获取所有坐标，但无法将包含 GDP 值的文本放入 InfoWindows 中。

当您按任意标记时，仅显示津巴布韦。这是为什么？我该如何修复它？多谢。

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: new google.maps.LatLng(25, 25),
    });
    var url = 'http://api.worldbank.org/countries/all/indicators/NY.GDP.MKTP.KD.ZG?date=2015&per_page=264&format=jsonp&prefix=Getdata';
    var query_url = url;

    var script = document.createElement('script');
    script.src = query_url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

window.Getdata = function(data) {
    var country_gdp = data[1].map(function(item) {
        return {
            country: item.country.value,
            value: item.value,
        }
    });

    for (i = 0; i < country_gdp.length; i++) {
        GDP_country_growth = country_gdp[i];
        var xhttp = new XMLHttpRequest();
        xhttp.addEventListener('load', processResponse);
        xhttp.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=' + GDP_country_growth.country + '&key=YOURAPIKEYHERE');
        xhttp.send();
        var processResponse = function() {
            var coordinates = JSON.parse(this.response);
            console.log(coordinates);

            var latLng = new google.maps.LatLng(coordinates.results[0].geometry.location.lat, coordinates.results[0].geometry.location.lng);
            var contentString = 'The GDP of ' + GDP_country_growth.country + ' is ' + GDP_country_growth.value;
            var infowindow = new google.maps.InfoWindow({
                content: contentString,
            });
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                contentString: contentString
            });
            marker.addListener('click', function() {
                infowindow.setContent(this.contentString);
                infowindow.open(map, this);
                map.setCenter(this.getPosition());
            });
        }
    }
}

Answer 1

要解决 infowindow 数据与地理编码位置的关联，一种选择是使用函数闭包(下面的函数在 GDP_country_growth(用于地理编码请求的数组元素)上获取闭包):

function processCountry(GDP_country_growth) {
  var xhttp = new XMLHttpRequest();
  var processResponse = function() {
    var coordinates = JSON.parse(this.response);
    console.log(coordinates);

    var latLng = new google.maps.LatLng(coordinates.results[0].geometry.location.lat, coordinates.results[0].geometry.location.lng);
    var contentString = 'The GDP of ' + GDP_country_growth.country + ' is ' + GDP_country_growth.value;
    var infowindow = new google.maps.InfoWindow({
      content: contentString,
    });
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      contentString: contentString
    });
    marker.addListener('click', function() {
      infowindow.setContent(this.contentString);
      infowindow.open(map, this);
      map.setCenter(this.getPosition());
    });
  }
  xhttp.addEventListener('load', processResponse);
  xhttp.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=' + GDP_country_growth.country);
  xhttp.send();
}

proof of concept fiddle

代码片段:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(25, 25),
  });
  var url = 'http://api.worldbank.org/countries/all/indicators/NY.GDP.MKTP.KD.ZG?date=2015&per_page=264&format=jsonp&prefix=Getdata';
  var query_url = url;

  var script = document.createElement('script');
  script.src = query_url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

window.Getdata = function(data) {
  var country_gdp = data[1].map(function(item) {
    return {
      country: item.country.value,
      value: item.value,
    }
  });

  for (i = 0; i < country_gdp.length; i++) {
    (function(country_info) {
      setTimeout(function() {
        processCountry(country_info);
      }, 1000 * i);
    })(country_gdp[i])
  }
}
google.maps.event.addDomListener(window, "load", initMap);

function processCountry(GDP_country_growth) {
  var xhttp = new XMLHttpRequest();
  var processResponse = function() {
    var coordinates = JSON.parse(this.response);
    console.log(coordinates);

    var latLng = new google.maps.LatLng(coordinates.results[0].geometry.location.lat, coordinates.results[0].geometry.location.lng);
    var contentString = 'The GDP of ' + GDP_country_growth.country + ' is ' + GDP_country_growth.value;
    var infowindow = new google.maps.InfoWindow({
      content: contentString,
    });
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      contentString: contentString
    });
    marker.addListener('click', function() {
      infowindow.setContent(this.contentString);
      infowindow.open(map, this);
      map.setCenter(this.getPosition());
    });
  }
  xhttp.addEventListener('load', processResponse);
  xhttp.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=' + GDP_country_growth.country);
  xhttp.send();
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>