通过滚动条增加谷歌地图上的圆圈半径 - Increasing the circle radius on google map by a scrollable bar

我在我的一个项目中使用谷歌地图，在该项目中，我正在围绕用户的当前位置创建半径。此外，用户必须能够根据自己的需要增加圆的半径。

我所能做的是放置另一个标记，该标记由用户根据圆的半径绘制。

但我想要的是必须有一个滚动条来增加圆的半径。因为它将为用户提供更友好的界面来增加半径。任何建议都将是最受欢迎的我的代码是低于

 function init() {
var mapCenter = new google.maps.LatLng( 30.356625899999994, 78.08492950000004);
var map = new google.maps.Map(document.getElementById('map'), {
    'zoom':12 ,
    'center': mapCenter,
    'mapTypeId': google.maps.MapTypeId.ROADMAP
});
// Create a draggable marker which will later on be binded to a
// Circle overlay.
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(30.356625899999994, 78.08492950000004),
    draggable: true,
    title: 'Drag me!'
});

// Add a Circle overlay to the map.
var circle = new google.maps.Circle({
    map: map,
    radius: 5000 // 5 km
});
// Since Circle and Marker both extend MVCObject, you can bind them
// together using MVCObject's bindTo() method.  Here, we're binding
// the Circle's center to the Marker's position.
// http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
circle.bindTo('center', marker, 'position');
}
// Register an event listener to fire when the page finishes loading.
google.maps.event.addDomListener(window, 'load', init);

您可以使用滑块（id=myslide）来更改的半径

$("#myslide").slider({
  orientation: "vertical",
  range: "min",
  max: 3000,
  min: 100,
  value: 500,
  slide: function(event, ui) {
    updateRadius(circle, ui.value);
  }
});
function updateRadius(circle, rad) {
  circle.setRadius(rad);
}

jQuery UI滑块：http://api.jqueryui.com/slider/

在您的情况下

<!doctype html>
<html lang="en">
<head>
   ....
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  .. 
</head>
<body>
<div id="myslider"></div>
<script>
$( "#myslider" ).slider();
</script>

<script>
var circle;
function init() {
var mapCenter = new google.maps.LatLng( 30.356625899999994, 78.08492950000004);
var map = new google.maps.Map(document.getElementById('map'), {
    'zoom':12 ,
    'center': mapCenter,
    'mapTypeId': google.maps.MapTypeId.ROADMAP
});
// Create a draggable marker which will later on be binded to a
// Circle overlay.
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(30.356625899999994, 78.08492950000004),
    draggable: true,
    title: 'Drag me!'
});

// Add a Circle overlay to the map.
circle = new google.maps.Circle({
    map: map,
    radius: 5000 // 5 km
});
// Since Circle and Marker both extend MVCObject, you can bind them
// together using MVCObject's bindTo() method.  Here, we're binding
// the Circle's center to the Marker's position.
// http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
circle.bindTo('center', marker, 'position');
}

$("#myslide").slider({
    orientation: "vertical",
    range: "min",
    max: 3000,
     min: 100,
    value: 500,
    slide: function(event, ui) {
        updateRadius(circle, ui.value);
    }
});
function updateRadius(circle, rad) {
    circle.setRadius(rad);
}
// Register an event listener to fire when the page finishes loading.
google.maps.event.addDomListener(window, 'load', init);
</script>
</body>
</html>