谷歌地图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>