通过滚动条增加谷歌地图上的圆圈半径
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>
相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- 在firefox和chrome中的左侧显示iframe滚动条
- jquery:将动画绑定到滚动条位置的更好方法
- 在窗口中添加滚动条
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 使用没有插件的javascript自定义滚动条
- CodeMirror.禁用垂直滚动条
- 在滚动时,在隐藏滚动条和隐藏溢出的同时触发事件
- 可以'无法使滚动条正常工作
- 强制滚动条覆盖页面内容
- 如何隐藏滚动条,但希望它继续工作
- 滚动所有嵌套的滚动条,使HTML元素进入视图
- 使用浏览器滚动条而不是iframe滚动条
- 滚动条在关闭引导对话框后消失
- javascript/获取滚动条位置的回调
- 可调整滚动条大小
- 在不增加滚动条宽度的情况下缩放网页?或指定滚动条宽度
- 通过滚动条增加谷歌地图上的圆圈半径
- 如何使Bootstrap jQuery数据表响应和增加/减少滚动条高度根据页面的大小