通过滚动条增加 google 地图上的圆半径

Question

我在我的一个项目中使用 google 地图，在该项目中我正在围绕用户的当前位置创建一个半径。还有用户必须能根据他增加圆的半径。

我能做的是放置另一个标记，用户拖动它会增加圆的半径。

但我想要的是必须有一个可滚动条来增加半径 circle.As 它将为用户提供更友好的界面来增加半径。任何建议都将受到欢迎我的代码如下

 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);

Answer 1

您可以使用滑块 (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>

通过滚动条增加 google 地图上的圆半径

Increasing the circle radius on google map by a scrollable bar

javascript

php

google-maps

google-maps-api-3

yii2-basic-app