Динамически обновлять маркер радиуса в API карт Google с помощью ползунка диапазона - PullRequest
Новая
       14

Динамически обновлять маркер радиуса в API карт Google с помощью ползунка диапазона

0 голосов
/ 13 октября 2019

У меня есть скрипт, в котором я применяю радиус поиска на карте Google. Я могу изменить радиус и заставить его отображаться динамически, но не могу понять, как заменить радиус вместо простого добавления радиуса. Функция использует маркер bindTo. Я попытался заменить и заменить с, но они, кажется, не работают.

Здесь ввод диапазона - 

<input type="range" class="custom-range" id="customRange1" value="20">

Вот скрипт добавления маркера и создания радиуса и привязки его, когдаизменяется значение диапазона. 

var marker = new google.maps.Marker({
    map: map,
    position: latLng,         
    title: name,
    icon: 'linktoimage'
    });        


// Add circle overlay and bind to marker

$('#customRange1').change(function(){
    var new_rad = $(this).val();
    var rad = new_rad * 1609.34;
    var circle = new google.maps.Circle({
        map: map,
        radius:rad,   
        fillColor: '#555',
        strokeColor: '#ffffff',
        strokeOpacity: 0.1,
        strokeWeight: 3
    });
        circle.bindTo('center', marker, 'position');
});

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

1 Ответ

0 голосов
/ 14 октября 2019

Сохраните ссылку на круг, если круг уже существует, не создавайте новый, измените существующий: 

  var circle;
  // Add circle overlay and bind to marker
  $('#customRange1').change(function() {
    var new_rad = $(this).val();
    var rad = new_rad * 1609.34;
    if (!circle || !circle.setRadius) {
      circle = new google.maps.Circle({
        map: map,
        radius: rad,
        fillColor: '#555',
        strokeColor: '#ffffff',
        strokeOpacity: 0.1,
        strokeWeight: 3
      });
      circle.bindTo('center', marker, 'position');
    } else circle.setRadius(rad);
  });

подтверждение концепции скрипта

фрагмент кода: 

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var circle;
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    title: "name"
  });


  // Add circle overlay and bind to marker
  $('#customRange1').change(function() {
    var new_rad = $(this).val();
    var rad = new_rad * 1609.34;
    if (!circle || !circle.setRadius) {
      circle = new google.maps.Circle({
        map: map,
        radius: rad,
        fillColor: '#555',
        strokeColor: '#ffffff',
        strokeOpacity: 0.1,
        strokeWeight: 3
      });
      circle.bindTo('center', marker, 'position');
    } else circle.setRadius(rad);
  });

}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" class="custom-range" id="customRange1" value="20">
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
...