代码之家  ›  专栏  ›  技术社区  ›  Marc Bourque

Fitbunds没有定时器就不能工作[关闭]

  •  0
  • Marc Bourque  · 技术社区  · 7 年前

    当我试图删除fitbunds周围的setTimeout时,智能变焦将停止工作。我知道Google Maps API大多是异步的,这就是计时器让我的代码工作的原因。我已经找了几个小时,没有找到任何解决办法来删除这个计时器。有人能帮我吗?

    var map;
    var markers = [];
    var bounds;
    
    //Initialise google map
    function initMap() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(46.950324, -71.256578);
        var mapOptions = {
          zoom: 7,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
    }
    
    function filterSelection() { 
    deleteMarkers();
    
    for(...) {
    
        //Prends les informations de la compagnie
        var varlat = div[j].getAttribute('data-lat');
        var varlong = div[j].getAttribute('data-long');
        var nom = div[j].getAttribute('data-nom');
        var infowindow = new google.maps.InfoWindow({
              content: ""
        });
    
        if(varlat && varlong) {
            var maplatlong = new google.maps.LatLng(varlat, varlong);
    
            //Mets le point sur la carte
            var marker = new google.maps.Marker({
                map: map,
                position: maplatlong,
                title: nom,
                info: nom
            });
    
            //Pop up lorsqu'on clique sur le point
            marker.addListener('click', function() {
                infowindow.setContent( this.info );
                infowindow.open( map, this );
            });
            markers.push(marker);
            bounds.extend(maplatlong);
        }
    
    }       
    
    setTimeout(function(){ 
        if(markers.length > 0 ) {
            map.fitBounds(bounds); 
    
            google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
            this.setZoom(map.getZoom()-1);
              if (this.getZoom() > 15) {
                this.setZoom(15);
              }
            });
        } else {
            map.setCenter(new google.maps.LatLng(46.950324, -71.256578));
        }
    }, 3000);
    }
    
    
    // Deletes all markers in the array by removing references to them. AIzaSyATmzbLFTjqkr_vOKK1F8CIZ0cw1G0RNRA
    function deleteMarkers() {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
        }
        markers = [];
        bounds = new google.maps.LatLngBounds(null);
    }
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   geocodezip    7 年前

    最简单的解决方案是运行 map.fitBounds 完成循环时(当j==div.length-1时):

    function filterSelection() {
      deleteMarkers();
      var div = $(".marker");
      for (var j = 0; j < div.length; j++) {
    
        //Prends les informations de la compagnie
        var varlat = div[j].getAttribute('data-lat');
        var varlong = div[j].getAttribute('data-long');
        var nom = div[j].getAttribute('data-nom');
        var infowindow = new google.maps.InfoWindow({
          content: ""
        });
    
        if (varlat && varlong) {
          var maplatlong = new google.maps.LatLng(varlat, varlong);
    
          //Mets le point sur la carte
          var marker = new google.maps.Marker({
            map: map,
            position: maplatlong,
            title: nom,
            info: nom
          });
    
          //Pop up lorsqu'on clique sur le point
          marker.addListener('click', function() {
            infowindow.setContent(this.info);
            infowindow.open(map, this);
          });
          markers.push(marker);
          bounds.extend(maplatlong);
          if (j==div.length-1) map.fitBounds(bounds);
        }
      }
    }
    

    proof of concept fiddle

    screenshot of resulting map

    代码段:

    //Initialise google map
    function initMap() {
      geocoder = new google.maps.Geocoder();
      map = new google.maps.Map(document.getElementById('map'));
      filterSelection();
    }
    
    function filterSelection() {
      deleteMarkers();
      var div = $(".marker");
      for (var j = 0; j < div.length; j++) {
        //Prends les informations de la compagnie
        var varlat = div[j].getAttribute('data-lat');
        var varlong = div[j].getAttribute('data-long');
        var nom = div[j].getAttribute('data-nom');
        var infowindow = new google.maps.InfoWindow({
          content: ""
        });
    
        if (varlat && varlong) {
          var maplatlong = new google.maps.LatLng(varlat, varlong);
    
          //Mets le point sur la carte
          var marker = new google.maps.Marker({
            map: map,
            position: maplatlong,
            title: nom,
            info: nom
          });
    
          //Pop up lorsqu'on clique sur le point
          marker.addListener('click', function() {
            infowindow.setContent(this.info);
            infowindow.open(map, this);
          });
          markers.push(marker);
          bounds.extend(maplatlong);
          if (j==div.length-1) map.fitBounds(bounds);
        }
      }
    }
    
    // Deletes all markers in the array by removing references to them. 
    function deleteMarkers() {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
      }
      markers = [];
      bounds = new google.maps.LatLngBounds(null);
    }
    google.maps.event.addDomListener(window, "load", initMap);
    var map;
    var markers = [];
    var bounds;
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
    <div id="map"></div>
    <div class="marker" data-lat="37.4688273" data-long="-122.141075" data-nom="East Palo Alto, CA"></div>
    <div class="marker" data-lat="37.4529598" data-long="-122.1817252" data-nom="Menlo Park, CA"></div>
    <div class="marker" data-lat="37.424106" data-long="-122.1660756" data-nom="Stanford, CA"></div>