Увеличение радиуса круга на карте Google с помощью прокручиваемой полосы

Я использую карту Google в одном из своих проектов, в котором я создаю радиус вокруг текущего местоположения пользователя. Также пользователь должен иметь возможность увеличивать радиус круга по своему усмотрению.

то, что я смог сделать, это разместить еще один маркер, который при перетаскивании пользователем увеличивает радиус круга.

Но я хочу, чтобы была прокручиваемая полоса для увеличения радиуса круга. Поскольку она предоставит пользователю более удобный интерфейс для увеличения радиуса. любое предложение будет приветствоваться, мой код ниже

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

google-maps javascript php google-maps-api-3 yii2-basic-app
person rahul s negi    schedule 07.01.2016    source источник
comment
Любая ссылка или что-то, связанное с моим требованием, которое я могу изменить соответственно. также будет приветствоваться   -  person rahul s negi    schedule 07.01.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать ползунок (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: 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>
person scaisEdge    schedule 07.01.2016
comment
@scaisEdge, не могли бы вы рассказать мне, как реализовать это с помощью моего вышеуказанного js? - person rahul s negi; 07.01.2016
comment
@scaisEdge не знаю почему, но теперь он ничего не отображает. - person rahul s negi; 07.01.2016
comment
@rahulsnegi Вы включили jQuery и пользовательский интерфейс jQuery (по крайней мере, слайдер)? Вы создали элемент #myslide? И да посмотри в консоли ошибки. Это всегда помогает! - person MrUpsidown; 07.01.2016
comment
Я обновил ответ, указав также ссылку на пользовательский интерфейс JQuery и div myslide для слайдера. Надеюсь, что JQuery уже доступен, в противном случае я тоже добавлю их. - person scaisEdge; 07.01.2016
comment
@scaisEdge извините за эту глупую ошибку, да, я забыл включить jQuery. Теперь все работает нормально И еще раз спасибо. - person rahul s negi; 08.01.2016
comment
@MrUpsidown, спасибо за вашу поддержку. быть новичком может снова беспокоить вас, надеюсь, вы не будете возражать - person rahul s negi; 08.01.2016