google-maps - Google マップ v3 で DownloadUrl を更新し、古いマーカーを削除する

Question

こんにちは、スクリプトと、10.000 個のマーカーを含む xml ファイルがありました。マーカーを表示するために markercluster を使用しますが、モバイル ブラウザーの要件を満たすために、特定のズーム レベルでマップを開始する必要があります (多数のマーカーを表示しないため)。そのため、ユーザーがズームまたはビューポートを変更したときに、マーカーを動的にロードしたいと考えています。

これが私のスクリプトです。現在のビューポートの LatLngBounds の緯度と経度を取得できないと思います:

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に渡します

そして 2 番目のポイント、確かにどこかのリスナーが恋しいのですが、どこかわかりません! ご意見ありがとうございます

- - 編集 - -

現在、アイドル状態が変更されたときにデータを動的にロードできますが、(しかし) 変更するたびに、マップ上に既にある場合でも新しいマーカーが追加されます。新しいマーカーをロードする前にアイドル状態が変化したときに、すべてのマーカーを消去する方法はありますか?

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]);
    }