fitBounds（bound）函数无法正常工作

I have te following code:

我有以下代码:

var bound = new google.maps.LatLngBounds();
    if (arrMarkers.length > 0) {                       

                            for (var i = 0; i < arrMarkers.length; i++) {
                                bound.extend(new google.maps.LatLng(arrMarkers[i].getPosition().lat(), arrMarkers[i].getPosition().lng()));
                            }
                            strDefaultLtLong = bound.getCenter();// get center from bounds

                        }
    var image = 'Images/star.png';

                        var mapOptions = {
                            center: strDefaultLtLong,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            disableDoubleClickZoom: true,
                            zoom: parseInt(strDefaultZoomLevel)

                        }

                        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                        if (arrMarkers.length == 1) {
                            map.setZoom(parseInt(strDefaultZoomLevel));
                        }
                        else if (arrMarkers.length > 1) {
                            map.fitBounds(bound);

                            google.maps.event.addListener(map, 'idle', function (event) {
                                if (map.getZoom() > parseInt(strDefaultZoomLevel)) {
                                    map.setZoom(parseInt(strDefaultZoomLevel));
                                }
                            });
                            google.maps.event.clearListeners(map, 'idle');

                        }

I have list of locations in arrMarkers. fitBounds() function works only if locations have different location but if list of locations has same location(Lat&Long) then it displays fully zoomed map.

我有arrMarkers的位置列表。 fitBounds()函数仅在位置具有不同位置但位置列表具有相同位置(纬度和长度)时才有效,然后显示完全缩放的地图。

How can I handle that to default zoom or particular zoom level so that listing will display appropriatly?

如何处理默认缩放或特定缩放级别,以便列出适当的显示?

Thanks..

1 个解决方案

#1

if the locations of the markers are really equal, you may compare the SW and the NE of the bounds, they should be equal too:

如果标记的位置真的相等,你可以比较SW和边界的NE,它们也应该相等:

//if (arrMarkers.length == 1) {
if(bounds.getSouthWest().toUrlValue()
      ===
   bounds.getNorthEast().toUrlValue()){

  map.setZoom(parseInt(strDefaultZoomLevel));

}

Demo:

function init() {
        
        var goo=google.maps,
            strDefaultZoomLevel='7',
        
        map = new goo.Map(document.getElementById('map_canvas'),
            {
              zoom: parseInt(strDefaultZoomLevel),
              noClear:true
            }),
        btn=document.getElementById('btn'),
        markers=[
                          new goo.Marker({position:{lat:11.11,lng:22.22},
                                          icon:{ 
                                                  url:'http://maps.google.com/mapfiles/dir_0.png',
                                                  scaledSize:new goo.Size(48,48)
                                               }}),
                          new goo.Marker({position:{lat:11.11,lng:22.22},
                                          icon:{ 
                                                  url:'http://maps.google.com/mapfiles/dir_60.png',
                                                  scaledSize:new goo.Size(48,48)
                                               }}),
                          new goo.Marker({position:{lat:66.66,lng:77.77},
                                          icon:{ 
                                                  url:'http://maps.google.com/mapfiles/dir_0.png',
                                                  scaledSize:new goo.Size(48,48)
                                               }})
                       ];
        
        map.controls[goo.ControlPosition.BOTTOM_CENTER]
          .push(btn);
        
        goo.event.addDomListener(btn,'click',function(){
          
          for(var i=0;i<markers.length;++i){
            markers[i].setMap(null);
          }
          this.value=(this.value==='draw equal markers')
                      ? 'draw different markers'
                      : 'draw equal markers';
          
          
          var arrMarkers=markers.slice.apply(markers,(this.value==='draw equal markers')
                                                        ? [1,3]
                                                        : [0,2]),
              bounds=new goo.LatLngBounds();
          
          for(var i=0;i<arrMarkers.length;++i){
            arrMarkers[i].setMap(map);
            bounds.extend(arrMarkers[i].getPosition());
          }
          
          if(bounds.getSouthWest().toUrlValue()
              ===
             bounds.getNorthEast().toUrlValue()){

            map.setOptions({
                            zoom:parseInt(strDefaultZoomLevel),
                            center:bounds.getCenter()
                           }); 
          }
          else{
            map.fitBounds(bounds);
          }           
        });
        google.maps.event.trigger(btn,'click');
      
        
      }

html,body,#map_canvas{height:100%;margin:0;padding:0;}
       #btn{font:14px bold Monospace;background:tomato;margin-bottom:12px;}

<div id="map_canvas">
  <input id="btn" type="button" value="draw equal markers"/>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=init"></script>