谷歌地圖API fitbounds移動地圖左或右

Question

我有一個應用程序，我保存中心的緯度，經度和中心和東北角之間的距離地圖，這樣我們可以繪製地圖相同我們保存的邊界。 我用存儲的數據繪製地圖時遇到的第一個問題是，使用fitbounds（）將邊距添加到我傳遞的邊界，這增加了額外的縮放級別，其中地圖看起來與原始版本非常不同的地圖。爲了解決這個問題，我重新計算了解決方案＃6的界限：https://code.google.com/p/gmaps-api-issues/issues/detail?id=3117

我使用map.fitbounds（新邊界），重新計算由於fitbounds方法添加的邊界導致的邊界。

但是現在我注意到，當我繪製一張存儲在數據庫中的值的地圖時，地圖會隨機向右或向左移動，這在低縮放級別上會更加出色。我希望你能明白爲什麼會發生這種情況，或者我該如何解決這個問題。謝謝。

Answer 1

您可以編寫自定義函數來解決餘量問題。請看myFitBounds（）函數的實現。

代碼片段：

var map; 
 
function myFitBounds(myMap, bounds) { 
 
    myMap.fitBounds(bounds); 
 

 
    var overlayHelper = new google.maps.OverlayView(); 
 
    overlayHelper.draw = function() { 
 
     if (!this.ready) { 
 
      var projection = this.getProjection(), 
 
      zoom = getExtraZoom(projection, bounds, myMap.getBounds()); 
 
      if (zoom > 0) { 
 
       myMap.setZoom(myMap.getZoom() + zoom); 
 
      } 
 
      this.ready = true; 
 
      google.maps.event.trigger(this, 'ready'); 
 
     } 
 
    }; 
 
    overlayHelper.setMap(myMap); 
 
} 
 

 
// LatLngBounds b1, b2 -> zoom increment 
 
function getExtraZoom(projection, expectedBounds, actualBounds) { 
 
    var expectedSize = getSizeInPixels(projection, expectedBounds), 
 
     actualSize = getSizeInPixels(projection, actualBounds); 
 

 
    if (Math.floor(expectedSize.x) == 0 || Math.floor(expectedSize.y) == 0) { 
 
     return 0; 
 
    } 
 

 
    var qx = actualSize.x/expectedSize.x; 
 
    var qy = actualSize.y/expectedSize.y; 
 
    var min = Math.min(qx, qy); 
 

 
    if (min < 1) { 
 
     return 0; 
 
    } 
 

 
    return Math.floor(Math.log(min)/Math.log(2) /* = log2(min) */); 
 
} 
 

 
// LatLngBounds bnds -> height and width as a Point 
 
function getSizeInPixels(projection, bounds) { 
 
    var sw = projection.fromLatLngToContainerPixel(bounds.getSouthWest()); 
 
    var ne = projection.fromLatLngToContainerPixel(bounds.getNorthEast()); 
 
    return new google.maps.Point(Math.abs(sw.y - ne.y), Math.abs(sw.x - ne.x)); 
 
} 
 

 
function initialize() { 
 
    var mapOptions = { 
 
     zoom: 8, 
 
     center: new google.maps.LatLng(-34.397, 150.644), 
 
     panControl: false, 
 
     zoomControl: false, 
 
     mapTypeControl: false, 
 
     scaleControl: false, 
 
     streetViewControl: false, 
 
     overviewMapControl: false 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 
 

 
    bounds = new google.maps.LatLngBounds(); 
 
    var extendPoint1 = new google.maps.LatLng(35.491823,6.626860999999963); 
 
    var extendPoint2 = new google.maps.LatLng(47.09192,18.520579999999995); 
 
    new google.maps.Marker({position: extendPoint1,map: map}); 
 
    new google.maps.Marker({position: extendPoint2,map: map}); 
 
    bounds.extend(extendPoint1); 
 
    bounds.extend(extendPoint2); 
 
    myFitBounds(map,bounds); 
 
    //map.fitBounds(bounds); 
 
}

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<div id="map-canvas"></div> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=initialize"></script>