通过可滚动条

时间:2016-01-07 07:51:04

标签: javascript php google-maps google-maps-api-3 yii2-basic-app

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

我能做的就是放置另一个标记,由用户排出,增加圆的半径。

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

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

1 个答案:

答案 0 :(得分:2)

您可以使用滑块(id = myslide)并更改半径

SELECT   emp_code
FROM     fsc_sts_dpt
WHERE    dept_id IN ( 1, 2, 3, 4 )
GROUP BY emp_code
HAVING   COUNT( CASE WHEN status = 'Y' THEN NULL ELSE 1 END ) = 0

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

在你的情况下

$("#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);
}