javascript 谷歌地图中的交互式圆圈随半径变化而变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15095118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Interactive circle in google map which changes on changing radius
提问by Abhishek
I want an interactive circle for google maps, which increases or decreases as and when i change radius in slider.
It is working fine when i am increasing radius, but on decreasing radius it is not changing(decreasing) circle in map
我想要一个用于谷歌地图的交互式圆圈，当我改变滑块的半径时，它会增加或减少。
当我增加半径时它工作正常，但在减小半径时它不会改变（减少）地图中的圆圈
$(function() {
$("#slide").slider({
orientation: "horizontal",
range: "min",
max: 10000,
min: 500,
value: 500,
slide: function( event, ui ) {
drawCircle(ui.value);
}
});
});
function drawCircle(rad){
circle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: myMap,
radius: rad });
circle.bindTo('center', marker, 'position');
}
回答by js1568
Create the circle once instead of on every slider move event. Then simply update the radius of the circle when the slider changes.
创建圆圈一次，而不是在每个滑块移动事件上。然后在滑块改变时简单地更新圆的半径。
Untested code:
未经测试的代码：
var circle; //global variable, consider adding it to map instead of window
$(function() {
circle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: myMap,
radius: 500
});
circle.bindTo('center', marker, 'position');
$( "#slide" ).slider({
orientation: "horizontal",
range: "min",
max: 10000,
min: 500,
value: 500,
slide: function( event, ui ) {
updateRadius(circle, ui.value);
}
});
});
function updateRadius(circle, rad){
circle.setRadius(rad);
}
