Google maps 在GMAP中重新加载一组新标记时清除覆盖时出现问题_Google Maps_Google Maps Api 3_Google Maps Markers

Google maps 在GMAP中重新加载一组新标记时清除覆盖时出现问题

google-maps google-maps-api-3

Google maps 在GMAP中重新加载一组新标记时清除覆盖时出现问题,google-maps,google-maps-api-3,google-maps-markers,Google Maps,Google Maps Api 3,Google Maps Markers,我有一个gmap，我只想在可视区域显示标记。我添加了一个侦听器来获取地图的边界，并调用聚集边界内的标记。问题是，当边界更改时，我希望清除地图并使用更新的标记重新加载。目前，地图将继续重新加载彼此顶部的标记，这使得地图速度非常慢。我试过： google.maps.event.addListener(map, 'bounds_changed', function () { clearOverlays(); loadMapFromCurrentBounds(map); }); 这根

我有一个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() {}

函数加载（）{
var map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（40，-100），
缩放：4，
mapTypeId:“路线图”
});
google.maps.event.addListener（映射，'bounds_changed'，函数（）{
loadMapFromCurrentBounds（地图）；
}); 
}
函数clearOverlays（）{
如果（标记）{
用于（标记中的i）{
标记[i].setMap（空）；
}
}
}
函数loadMapFromCurrentBounds（映射）{
clearOverlays（）；
var infoWindow=new google.maps.infoWindow；
var bounds=map.getBounds（）；//首先，确定映射边界
var swPoint=bounds.getSouthWest（）；//然后
var nePoint=bounds.getNorthEast（）；
//根据PHP文件的名称更改此选项
var searchUrl='Viewport_Search.php？west='+swPoint.lat（）+'&east='+nePoint.lat（）+'&south='+swPoint.lng（）+'&north='+nePoint.lng（）；
下载URL（搜索URL，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i“+地址；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
});
bindInfoWindow（标记、地图、infoWindow、html）；
}
});
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}

请帮忙。。。我整晚都在电脑前绞尽脑汁寻找答案。请随时发送电子邮件和/或询问任何问题。

您不能删除所有标记，但可以将每个可见标记上的MAP设置为null。我就是这样做的

将标记数组添加到贴图对象

将clearAllMarkers函数添加到映射对象

每个标记都添加到地图中，同时也添加到标记数组中

clearAllMarkers函数类似于：

for（var idx=0；idx下面是该问题的完整代码解决方案..感谢您的帮助
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() {}

var-map；//elrado的代码
var markersArray=[]；//elrados的代码为标记创建数组
函数加载（）{
map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（33.553029，-112.054017），
缩放：13，
mapTypeId:“路线图”
});
google.maps.event.addListener（映射'tilesloaded'，函数（）{
clearOverlays（）
loadMapFromCurrentBounds（地图）；
}); 
}
函数clearOverlays（）{//clear overlays函数
if（markersArray）{
for（markersArray中的i）{
markersArray[i].setMap（空）；
}
}
}
函数loadMapFromCurrentBounds（map）{
var infoWindow=new google.maps.infoWindow；
var bounds=map.getBounds（）；//首先，确定映射边界
var swPoint=bounds.getSouthWest（）；//然后
var nePoint=bounds.getNorthEast（）；
//根据PHP文件的名称更改此选项
var searchUrl='Viewport_Search.php？west='+swPoint.lat（）+'&east='+nePoint.lat（）+'&south='+swPoint.lng（）+'&north='+nePoint.lng（）；
下载URL（搜索URL，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i“+地址；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
});
markersArray.push（marker）；//eldorado的代码定义要放入标记的数组
bindInfoWindow（标记、地图、infoWindow、html）；
}
});
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}
我尝试了你提到的方法，但它仍然以同样的方式执行。我添加了一个按钮
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() {}

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() {}