谷歌地图API fitbounds移动地图左或右
问题描述:
我有一个应用程序,我保存中心的纬度,经度和中心和东北角之间的距离地图,这样我们可以绘制地图相同我们保存的边界。 我用存储的数据绘制地图时遇到的第一个问题是,使用fitbounds()将边距添加到我传递的边界,这增加了额外的缩放级别,其中地图看起来与原始版本非常不同的地图。为了解决这个问题,我重新计算了解决方案#6的界限:https://code.google.com/p/gmaps-api-issues/issues/detail?id=3117谷歌地图API fitbounds移动地图左或右
我使用map.fitbounds(新边界),重新计算由于fitbounds方法添加的边界导致的边界。
但是现在我注意到,当我绘制一张存储在数据库中的值的地图时,地图会随机向右或向左移动,这在低缩放级别上会更加出色。我希望你能明白为什么会发生这种情况,或者我该如何解决这个问题。谢谢。
答
您可以编写自定义函数来解决余量问题。请看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>
我试过这种方法,但我得到了额外的变焦问题,现在我发现有错误计算解决方案#经度6,例如,当边界是sw(-28.599535437631257,179.61766330196713)和ne(40.60039691341636,-14.684176724750273)它增加了边界,我试图找出如何解决它。谢谢 – Charles