google-maps - 在谷歌地图 v3 上刷新 DownloadUrl 并删除旧标记

Question

嗨，我有一个脚本和一个包含 10.000 个标记的 xml 文件。我使用 markercluster 来显示标记，但为了满足移动浏览器的要求，我必须以一定的缩放级别开始地图（不显示到许多标记）。所以我想在用户更改缩放或视口时动态加载标记。

这是我的脚本。我想我无法获得当前视口的 LatLngBounds 的 lat 和 lng ：

var customIcons = {
      chambrehote: {
        icon: '/wp-content/themes/codium-extend/images/chambre.png',
        shadow: '/wp-content/themes/codium-extend/images/icon-shadow.png'
      }
    };

    function initialize() {
      var cluster = [];
      var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng('45.7676067','4.8351733'),
        scrollwheel: false,
        zoom: 12,
        mapTypeId: 'roadmap'
      });

    var mcOptions = {gridSize: 100, styles: [
          {
            textColor: 'black',
            height: 80,
            url: "/wp-content/themes/codium-extend/images/cluster-m1.png",
            width: 90
          },
          {
            textColor: 'black',
            height: 80,
            url: "/wp-content/themes/codium-extend/images/cluster-m2.png",
            width: 90
          },
          {
            textColor: 'black',
            height: 80,
            url: "/wp-content/themes/codium-extend/images/cluster-m3.png",
            width: 90
          }
    ]};      

    var infoWindow = new google.maps.InfoWindow;

    var bounds = new google.maps.LatLngBounds();

    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();

    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();

        downloadUrl("/wp-content/themes/codium-extend/search/search_chambres.php?&type=chambrehote&codgeo=<?php echo $CODGEO ; ?>&radius=200&lat1="+swLat+"&lng1="+swLng+"&lat2="+neLat+"&lng2="+neLng+"", 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("ville");
          var slug = markers[i].getAttribute("slug");
          var stars = markers[i].getAttribute("stars");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> " + "<br/>" + "" + "><a href=" + "/chambre-d-hote/" + slug + "/>lien vers la fiche</a>";

          var icon = customIcons[type] || {};
          //var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
          //bounds.extend(point);
          //map.fitBounds(bounds);
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {                                                                      infowindow.setContent(markers[i].getAttribute("name"));
                    infowindow.open(map, marker);
                        }
                    })(marker, i));
          cluster.push(marker);

        }
      var mc = new MarkerClusterer(map,cluster,mcOptions);


      });

     }

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

    function changePosition() {
      var position = document.getElementById('position').value;
      adUnit.setPosition(google.maps.ControlPosition[position]);
    }

第一点：我认为我无法获得 swLat, swLng... 的值，用于将它们传递给 downloadUrl

第二点我当然想念某个地方的听众，但不知道在哪里！感谢您的投入

- - 编辑 - -

现在我可以在空闲更改时动态加载数据，但是（有一个但是）现在每个更改都会添加一个新标记，即使它已经在地图上。有没有办法在加载新标记之前在空闲更改时清除所有标记？

var cluster = [];
      var map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: new google.maps.LatLng('45.7676067','4.8351733'),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

       var mcOptions = {gridSize: 100, styles: [
          {
            textColor: 'black',
            height: 80,
            url: "/wp-content/themes/codium-extend/images/cluster-m1.png",
            width: 90
          },
          {
            textColor: 'black',
            height: 80,
            url: "/wp-content/themes/codium-extend/images/cluster-m2.png",
            width: 90
          },
          {
            textColor: 'black',
            height: 80,
            url: "/wp-content/themes/codium-extend/images/cluster-m3.png",
            width: 90
          }
    ]};      
      var infoWindow = new google.maps.InfoWindow;

       google.maps.event.addListener(map, 'idle', function() {

        var bounds = map.getBounds();
        var swPoint = bounds.getSouthWest();
        var nePoint = bounds.getNorthEast();
        var swLat = swPoint.lat();
        var swLng = swPoint.lng();
        var neLat = nePoint.lat();
        var neLng = nePoint.lng();
          // alert(swLng);

          downloadUrl("/wp-content/themes/codium-extend/search/search_chambres.php?lat=45.7676067&lng=4.8351733&type=chambrehote&codgeo=<?php echo $CODGEO ; ?>&radius=2000&lat1="+swLat+"&lng1="+swLng+"&lat2="+neLat+"&lng2="+neLng+"", 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("ville");
          var slug = markers[i].getAttribute("slug");
          var stars = markers[i].getAttribute("stars");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> " + "<br/>" + "" + "><a href=" + "/chambre-d-hote/" + slug + "/>lien vers la fiche</a>";

          var icon = customIcons[type] || {};
          //var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
          //bounds.extend(point);
          //map.fitBounds(bounds);
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(markers[i].getAttribute("name"));
                    infowindow.open(map, marker);
                        }
                    })(marker, i));
          cluster.push(marker);

        }
      var mc = new MarkerClusterer(map,cluster,mcOptions);


      });  


      });


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

    function changeFormat() {
      var format = document.getElementById('format').value;
      adUnit.setFormat(google.maps.adsense.AdFormat[format]);
    }

    function changePosition() {
      var position = document.getElementById('position').value;
      adUnit.setPosition(google.maps.ControlPosition[position]);
    }