好的,所以我正在学习谷歌地图 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);
代码片段:
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/