在Google地图v3上刷新DownloadUrl并删除旧标记

时间:2013-10-02 13:16:44

标签: google-maps google-maps-api-3 markerclusterer

您好我有一个脚本和一个包含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]);
    }   

0 个答案:

没有答案