在谷歌地图api中移动一个圆圈

Question

好的，所以我正在学习谷歌地图API，我正试图根据长和拉特（谷歌地图如何与蓝点一起工作）获得实时移动点

不，除非我弄错了，看起来我必须绘制自己的圆圈并更新它的位置。

问题是我无法让圆圈得到更新。

这是我的代码：

var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2842518
};

var cityCircle;

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Construct the circle for each value in citymap.
  // Note: We scale the population by a factor of 20.
  for (var city in citymap) {
    var populationOptions = {
      strokeColor: '#fff',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#fff',
      map: map,
      center: citymap[city].center,
      radius: 50000,

    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
    var a=0;
    window.setInterval(function(){
        var p = populationOptions.center;
        var g = p.lat()+500;
        var m = p.lng()+500;    
        cityCircle.setCenter(new google.maps.LatLng(g,m));
        cityCircle.setRadius(a+=10);
    }, 50);
  }
}

我真的很惊讶谷歌的api不只是暴露那个蓝色标记，你可以在需要时移动它。

Answer 1

您的更新功能不正确。 任何有效的纬度+ 500都将不在地图上。 更合理的数字是0.1度。 另外，您应该使用cityCircle.getCenter（）来代替populationOptions.center。

// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
var a=50000;
window.setInterval(function(){
    var p = cityCircle.getCenter();
    var g = p.lat()+0.1;
    var m = p.lng()+0.1;    
    cityCircle.setCenter(new google.maps.LatLng(g,m));
    cityCircle.setRadius(a+=10);
}, 500);

工作实例

代码段：

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

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map-canvas"></div> <script> var citymap = {}; citymap['chicago'] = { center: new google.maps.LatLng(41.878113, -87.629798), population: 2842518 }; var cityCircle; function initialize() { // Create the map. var mapOptions = { zoom: 4, center: new google.maps.LatLng(37.09024, -95.712891), mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Construct the circle for each value in citymap. // Note: We scale the population by a factor of 20. for (var city in citymap) { var populationOptions = { strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, center: citymap[city].center, radius: 50000 }; // Add the circle for this city to the map. cityCircle = new google.maps.Circle(populationOptions); // move the circle var a = 50000; window.setInterval(function() { var p = cityCircle.getCenter(); var g = p.lat() + 0.1; var m = p.lng() + 0.1; cityCircle.setCenter(new google.maps.LatLng(g, m)); cityCircle.setRadius(a += 10); }, 500); } } google.maps.event.addDomListener(window, 'load', initialize); </script>