javascript - 在google maps api中移动一个圆圈

标签 javascript google-maps google-maps-api-3

好的,所以我正在学习谷歌地图 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 不只是公开那个蓝色标记,你可以在需要的时候移动它。

最佳答案

您的更新功能不正确。任何有效纬度 + 500 都将不在 map 上。更合理的数字是 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);

working example

代码片段:

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>

关于javascript - 在google maps api中移动一个圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20021116/

相关文章:

javascript - 使用 Store Locator Library for Maps API 中的 'storeLocator.Feature' 的下拉菜单

javascript - InfoBubble 未从 google maps v3 api 定义

android - 如何处理gapps-jb-20130813-signed.zip

javascript - 如何每隔 n 个字符或最近的前一个空格分割字符串

带有分组功能的 JavaScript 排序功能

javascript - Google Maps Javascript API V3 如何地标仅显示名称

css - 谷歌地图 api v3 工具 : visual distortions?

jquery - 如何知道 Google 地点何时已加载并准备好(异步)?

javascript - 为什么 "var"关键字不能与逗号运算符一起使用?

javascript - 使用 D3 制作一组嵌套/分层表