Question

所以我试图使用以下代码绘制具有不同中心和不同半径（半径？）的多个圆圈：

var citymap = {
     chicago: {
         loc : "Chicago, IL",
         center: {lat: 40, lng: -70},
         shootings: 140000
     },
     newyork: {
         loc : "New York, NY",
         center: {lat: 40, lng: -70},
         shootings: 80000
     },
     losangeles: {
        loc : "Los Angeles, CA",
        center: {lat: 40, lng: -70},
        shootings: 40000
     },
};

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 39.14, lng: -98.1},
    zoom: 5
});

for (var city in citymap) {
    var geocoder =  new google.maps.Geocoder();
    geocoder.geocode( { 'address': citymap[city].loc}, 
          function(results, status) {
              citymap[city].center = { 
                  lat : results[0].geometry.location.lat(),
                  lng : results[0].geometry.location.lng()
              }

              // Add the circle for this city to the map.
              var cityCircle = new google.maps.Circle({
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: '#FF0000',
                  fillOpacity: 0.5,
                  map: map,
                  center: citymap[city].center,
                  radius: citymap[city].shootings 
              });    
           }); 
    }

我觉得这应该有效，但所有的圆圈都用相同的半径绘制。如果我将cityCircle放在地理编码器功能之外，则会绘制具有不同半径的圆圈，但所有圆圈都在同一位置。任何人都知道这里的问题是什么？

Answer 1

地理编码器是异步的。当回调函数运行时，循环已完成，city保留在最后一个值，因此所有圆圈都获得最后一个条目的半径。

一个解决方法是使用函数闭包：

function createCircleFromGeocode(city) {
  geocoder.geocode({
    'address': citymap[city].loc
  }, function(results, status) {
    citymap[city].center = {
      lat: results[0].geometry.location.lat(),
      lng: results[0].geometry.location.lng()
    }
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.5,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].shootings
    });
  });
}

proof of concept fiddle

代码段

＆＃13;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 39.14,
      lng: -98.1
    },
    zoom: 3
  });

  for (var city in citymap) {
    createCircleFromGeocode(city);
  }
}

function createCircleFromGeocode(city) {
  geocoder.geocode({
    'address': citymap[city].loc
  }, function(results, status) {
    citymap[city].center = {
      lat: results[0].geometry.location.lat(),
      lng: results[0].geometry.location.lng()
    }

    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.5,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].shootings
    });

  });

}
var geocoder = new google.maps.Geocoder();
var citymap = {
  chicago: {
    loc: "Chicago, IL",
    center: {
      lat: 40,
      lng: -70
    },
    shootings: 140000

  },
  newyork: {
    loc: "New York, NY",
    center: {
      lat: 40,
      lng: -80
    },
    shootings: 80000
  },
  losangeles: {
    loc: "Los Angeles, CA",
    center: {
      lat: 40,
      lng: -100
    },
    shootings: 40000
  },

};
var map;


google.maps.event.addDomListener(window, 'load', initMap);

＆＃13;

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

＆＃13;

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

＆＃13;

Google Maps Javascript API问题绘制多个圈子

1 个答案: