Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在谷歌地图api中移动圆圈_Javascript_Google Maps_Google Maps Api 3 - Fatal编程技术网

Javascript 在谷歌地图api中移动圆圈

Javascript 在谷歌地图api中移动圆圈,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,好的,我正在学习google maps API,我正试图获得一个基于long和lat的实时移动点(这正是google maps如何处理蓝点) 不,除非我弄错了,看起来我必须画我自己的圆圈并更新它的位置 问题是我无法更新圆圈 这是我的密码: var citymap = {}; citymap['chicago'] = { center: new google.maps.LatLng(41.878113, -87.629798), population: 2842518 }; var ci

好的,我正在学习google maps API,我正试图获得一个基于long和lat的实时移动点(这正是google maps如何处理蓝点)

不,除非我弄错了,看起来我必须画我自己的圆圈并更新它的位置

问题是我无法更新圆圈

这是我的密码:

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将不在地图上。更合理的数字是0.1度。此外,您应该使用cityCircle.getCenter()而不是populationOptions.center

代码片段:

html,
身体,
#地图画布{
身高:100%;
边际:0px;
填充:0px
}

var citymap={};
城市地图[“芝加哥”]={
中心:新google.maps.LatLng(41.878113,-87.629798),
人口:2842518
};
var城市圈;
函数初始化(){
//创建地图。
变量映射选项={
缩放:4,
中心:新google.maps.LatLng(37.09024,-95.712891),
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map(document.getElementById('map-canvas'),
地图选项);
//为城市地图中的每个值构建圆。
//注:我们按20倍的比例计算人口。
用于(城市地图中的var城市){
变量填充选项={
strokeColor:“#FF0000”,
笔划不透明度:0.8,
冲程重量:2,
填充颜色:'#FF0000',
不透明度:0.35,
地图:地图,
中心:城市地图[城市]。中心,
半径:50000
};
//将该城市的圆圈添加到地图中。
cityCircle=new google.maps.Circle(populationOptions);
//移动圆圈
var a=50000;
setInterval(函数(){
var p=cityCircle.getCenter();
var g=p.lat()+0.1;
var m=液化天然气()+0.1;
cityCircle.setCenter(新的google.maps.LatLng(g,m));
城市圆半径(a+=10);
}, 500);
}
}
google.maps.event.addDomListener(窗口“加载”,初始化);
// 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);