Проблема с очисткой наложения при перезагрузке нового набора маркеров в gmaps

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

google.maps.event.addListener(map, 'bounds_changed', function () {
    clearOverlays();
    loadMapFromCurrentBounds(map);
}); 

И это вообще не загрузит никаких маркеров. Я также пробовал:

function loadMapFromCurrentBounds(map) {
    clearOverlays();

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

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(40, -100),
    zoom: 4,
    mapTypeId: 'roadmap'
  });

google.maps.event.addListener(map, 'bounds_changed', function () {
    loadMapFromCurrentBounds(map);
}); 
}

function clearOverlays() {
  if (markers) {
    for (i in markers) {
      markers[i].setMap(null);
    }
  }
}

function loadMapFromCurrentBounds(map) {
    clearOverlays();

var infoWindow = new google.maps.InfoWindow;

var bounds = map.getBounds(); // First, determine the map bounds

var swPoint = bounds.getSouthWest();  // Then the points
var nePoint = bounds.getNorthEast();

     // Change this depending on the name of your PHP file
var searchUrl = 'Viewport_Search.php?west=' + swPoint.lat() + '&east=' + nePoint.lat() + '&south=' + swPoint.lng() + '&north=' + nePoint.lng();
  downloadUrl(searchUrl, function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + address;
      var marker = new google.maps.Marker({
        map: map,
        position: point,
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });

}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

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


person nicksonline    schedule 11.03.2012    source источник


Ответы (2)


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

  1. добавить массив маркеров в объект карты
  2. добавить функцию clearAllMarkers для объекта карты
  3. каждый маркер добавляется на карту, также добавляется в массив маркеров
  4. Функция clearAllMarkers выглядит примерно так:
   for (var idx=0;idx<=map.markers.length;idx++){
               map.markers[idx].setMap(null);
   }

Я верю, что вы добавляете отдельный объект маркеров в свой массив маркеров. Ваш массив маркеров должен быть заполнен ссылками на маркеры!!!

var map = []; //elrado's code

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(40, -100),
    zoom: 4,
    mapTypeId: 'roadmap'
  });

  map.markers = [];//elrado's code (add narkers.array to map object)

google.maps.event.addListener(map, 'bounds_changed', function () {
    loadMapFromCurrentBounds(map);
}); 
}

function clearOverlays() {
  if (map.markers) {
    for (i in map.markers) { //Might be you'll need to use map.markers.length
      markers[i].setMap(null);
    }
    map.markers = [];//reinit map.markers.array
  }
}

function loadMapFromCurrentBounds(map) {
    clearOverlays();

var infoWindow = new google.maps.InfoWindow;

var bounds = map.getBounds(); // First, determine the map bounds

var swPoint = bounds.getSouthWest();  // Then the points
var nePoint = bounds.getNorthEast();

     // Change this depending on the name of your PHP file
var searchUrl = 'Viewport_Search.php?west=' + swPoint.lat() + '&east=' + nePoint.lat() + '&south=' + swPoint.lng() + '&north=' + nePoint.lng();
  downloadUrl(searchUrl, function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + address;
      var marker = new google.maps.Marker({
        map: map,
        position: point,
      });
      map.markers.push(marker);//elrado's code
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });

}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

Должен предупредить, что это было написано из головы (не тест), но что-то подобное должно работать. По сути, вы устанавливаете setMap(null) для отдельных маркеров, а не для объектов, которые вы показываете на карте.

person elrado    schedule 11.03.2012
comment
Я попробовал то, что вы упомянули, и он все еще продолжает работать так же. Я добавил кнопку для очистки маркеров вручную, но что интересно, она не удаляет маркеры...?.?.? Почему маркеры не очищаются, когда я вызываю функцию вручную? ваша помощь очень ценится - person nicksonline; 11.03.2012
comment
Попробуйте добавить событие клика к маркеру и вызвать для него this.setMap(null). А также проверьте количество маркеров на карте. Возможно, у вас там двойное количество маркеров (больше маркеров на той же широте, долготе). - person elrado; 11.03.2012
comment
я добавил маркер события, и он удалил маркер, к которому было вызвано событие. но он все равно не удалит все маркеры. ниже ссылка на мой проект....можете взять пик. Я уверен, что это что-то очевидное, что мне не хватает. aptrentalnetwork.com - person nicksonline; 12.03.2012
comment
Оверлеи @nicksonline работают в Opera и Firefox. Когда я открыл вашу страницу, я сказал, что несколько маркеров были удалены, когда я нажал «Очистить наложение», и отображаются, когда я нажал «Показать все наложения». - person elrado; 12.03.2012
comment
Эльрадо, спасибо за помощь. Я смог исправить это вчера. Раньше я неправильно настраивал свой массив маркеров. - person nicksonline; 12.03.2012
comment
Если я помог вам, отметьте ответ как правильный, если нет, отредактируйте код своего вопроса, чтобы другие могли извлечь из этого пользу. - person elrado; 12.03.2012

Ниже приведен полный код решения проблемы. Спасибо за помощь.

var map;    //elrado's code 
var markersArray = [];   //elrados's code   create array for markers       

function load() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(33.553029,-112.054017),
    zoom: 13,
    mapTypeId: 'roadmap'
  });

google.maps.event.addListener(map, 'tilesloaded', function () {
    clearOverlays()
    loadMapFromCurrentBounds(map);
}); 
}


function clearOverlays() {  //clear overlays function
  if (markersArray) {
for (i in markersArray) {
  markersArray[i].setMap(null);
 }
}
}


function loadMapFromCurrentBounds(map) {    
var infoWindow = new google.maps.InfoWindow;

var bounds = map.getBounds(); // First, determine the map bounds

var swPoint = bounds.getSouthWest();  // Then the points
var nePoint = bounds.getNorthEast();

     // Change this depending on the name of your PHP file
var searchUrl = 'Viewport_Search.php?west=' + swPoint.lat() + '&east=' + nePoint.lat() + '&south=' + swPoint.lng() + '&north=' + nePoint.lng();
  downloadUrl(searchUrl, function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + address;
      var marker = new google.maps.Marker({
        map: map,
        position: point,
      });
      markersArray.push(marker);          //eldorado's code Define the array to put markers in

      bindInfoWindow(marker, map, infoWindow, html);
    }

  });

}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}
person nicksonline    schedule 12.03.2012