谷歌地图Javascript API发布绘制多个圆

Google Maps Javascript API Issue Drawing Multiple Circles

本文关键字：绘制 Javascript API 布绘制 谷歌地图      更新时间：2023-09-26

所以我试图用以下代码绘制多个圆心不同、半径不同的圆：

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放在地理编码器函数之外，它会绘制半径不同但都在同一点上的圆。有人知道这里的问题是什么吗？

地理编码器是异步的。当回调函数运行时，循环已经完成，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
    });
  });
}

概念验证小提琴

代码片段：

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);
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

相关文章：