Как удалить маркеры карты Google, не мигая? - PullRequest
Новая
       15

Как удалить маркеры карты Google, не мигая?

0 голосов
/ 02 июля 2019

Я пытаюсь заполнить несколько маркеров с помощью ajax-запроса с интервалом в 5 секунд.Все работает нормально, но маркеры мигают при каждом интервальном вызове.

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

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

Ниже приведен код: 

  var map;
  var places;
  var markers = [];
  var iw_map;
  var markers_map = new Array();

  function initialize() {
      geocoder = new google.maps.Geocoder();

      var latlngCenter = new google.maps.LatLng(25.1999721, 66.8354386);
      iw_map = new google.maps.InfoWindow();
      var mapOptions = {
          center: latlngCenter,
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      fetchPlaces();
      fitMapToBounds_map();
  }

  function fetchPlaces(cityId = null, hubId = null, riderId = null) {
    clearMarkers(); 
    $.ajax({
      url: '{{ route('get-markers') }}',
      method:'POST',
      data: {'city_id': cityId, hub_id: hubId, rider_id: riderId},
      dataType: 'json',
      cache: false,
      success: function(data) {

          // console.log(markers);

          var markerz = data.markers;

          // clearMarkers();

          $.each(markerz, function (i, dt) {

            var marker_icon = {url: dt.icon};
            var position = new google.maps.LatLng(dt.lat,dt.lng);
            var marker = new google.maps.Marker({
              map: map,
              position: position,
              icon: marker_icon
            });

            // newcoordinate = new google.maps.LatLng(dt.lat,dt.lng);

            google.maps.event.addListener(marker, "click", function(event) { 
              $.ajax({  
                  url: '{{ route('get-marker-info') }}',
                  method:'POST',
                  data: JSON.parse(dt.params),
                  success: function(data) {  
                      iw_map.setContent(data.infoBox);  
                      iw_map.open(map, marker);  
                  }  
              });
            });
            markers.push(marker.getPosition());
            markers_map.push(marker);
          });

          // fitMapToBounds_map();
      }  
    });

  }

  function fitMapToBounds_map() {
      var bounds = new google.maps.LatLngBounds();
      if (markers.length>0) {
          for (var i=0; i<markers.length; i++) {
              console.log(markers[i]);
              bounds.extend(markers[i]);
          }
          map.fitBounds(bounds);
      }
  } 

  function clearMarkers() {

    for (var i = 0; i < markers_map.length; i++) {
      markers_map[i].setMap(null);
    }

    markers_map = [];
  }

  function loadScript_map() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&v=3&libraries=places&callback=initialize";
      document.body.appendChild(script);
  }
  window.onload = loadScript_map;

  setInterval(fetchPlaces, 5000);

1 Ответ

0 голосов
/ 02 июля 2019

Это непроверенный код, поэтому может потребоваться несколько настроек.

Я переименовал ваши переменные со значимыми именами и изменил логику, чтобы сначала добавить новые маркеры, а затем удалить старые маркеры.

Когда вы получите свои маркеры с помощью AJAX, сначала очистите массив new_markers, затем нанесите маркеры на карту и добавьте их в массив new_markers.Затем удалите старые маркеры с карты (массив markers).В первый раз этот массив будет пустым, поэтому ничего не произойдет.Скопируйте массив new_markers в массив markers.Повторите.

Вот код: 

var map;
var places;
var markers_positions = [];
var markers = [];
var new_markers = [];
var iw_map;


function initialize() {
  geocoder = new google.maps.Geocoder();

  var latlngCenter = new google.maps.LatLng(25.1999721, 66.8354386);
  iw_map = new google.maps.InfoWindow();
  var mapOptions = {
    center: latlngCenter,
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  fetchPlaces();
  fitMapToBounds_map();
}

function fetchPlaces(cityId = null, hubId = null, riderId = null) {

  new_markers = [];

  $.ajax({
    url: '{{ route('get-markers') }}',
    method: 'POST',
    data: {
      city_id: cityId,
      hub_id: hubId,
      rider_id: riderId
    },
    dataType: 'json',
    cache: false,
    success: function(data) {

      $.each(data.markers, function(i, dt) {

        var marker_icon = {
          url: dt.icon
        };
        var position = new google.maps.LatLng(dt.lat, dt.lng);
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          icon: marker_icon
        });

        google.maps.event.addListener(marker, "click", function(event) {
          $.ajax({
            url: '{{ route('get-marker-info') }}',
            method: 'POST',
            data: JSON.parse(dt.params),
            success: function(data) {
              iw_map.setContent(data.infoBox);
              iw_map.open(map, marker);
            }
          });
        });
        markers_positions.push(marker.getPosition());
        new_markers.push(marker);
        clearMarkers();
      });
    }
  });

}

function fitMapToBounds_map() {
  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < markers_positions.length; i++) {
    console.log(markers_positions[i]);
    bounds.extend(markers_positions[i]);
  }
  map.fitBounds(bounds);
}

function clearMarkers() {

  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }

  markers = new_markers;
}

function loadScript_map() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&v=3&libraries=places&callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript_map;

setInterval(fetchPlaces, 5000);
...