For 循环未将文本放置在数组中的 InfoWindows Google 地图 API 中

Question

我正在运行设置一个 for 循环以遍历所有国家并使用世界银行 API 的 GDP 放置一个标记。

我能够运行 for 循环并从 Google 地图地理编码中获取所有坐标，但我无法在 InfoWindows 中放置带有 GDP 值的文本。

当你按任何标记时，它只显示津巴布韦。这是为什么？我该如何解决？非常感谢。

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

要解决信息窗口数据与地理编码位置的关联，一种选择是使用函数闭包（下面的函数在 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>

For 循环未将文本放置在数组中的 InfoWindows Google 地图 API 中

For loop is not placing text in InfoWindows Google Maps API from array

javascript

google-maps

google-maps-api-3

google-maps-markers