谷歌地图fitBounds回调
我知道有一个bounds_changed
事件会在边界发生变化时触发,但是我需要知道fitBounds何时完成(当边界发生变化或边界保持不变时)。
谷歌有某种宽容,如果边界变化很小,它实际上不会改变边界/边界调用bounds_changed。 我需要知道这是什么时候发生的。
我已经用超时的方式成功完成了这个任务,但是当bounds_changed需要超过100ms的时间触发时,它似乎很难做,并且可能会出现一些错误。
请参阅示例:http://jsbin.com/sosurexuke/1/edit?js,console,output
有更好的解决方案
编辑:如果您认为只是检查map.getBounds()是否与您发送的fitBounds()相同,那么您会很失望知道拟合界限的结果通常不会接近您发送的边界。 我写这个函数认为这可能是可能的
function boundsAreIdentical(bounds1, bounds2) {
if (!bounds1 || !bounds2) return false;
var tolerance = 0.00001;
console.log(bounds1.getNorthEast().lat(), bounds2.getNorthEast().lat());
console.log(bounds1.getNorthEast().lng(), bounds2.getNorthEast().lng());
console.log(bounds1.getSouthWest().lat(), bounds2.getSouthWest().lat());
console.log(bounds1.getSouthWest().lng(), bounds2.getSouthWest().lng());
if (
(Math.abs(bounds1.getNorthEast().lat() - bounds2.getNorthEast().lat()) <= tolerance) &&
(Math.abs(bounds1.getNorthEast().lng() - bounds2.getNorthEast().lng()) <= tolerance) &&
(Math.abs(bounds1.getSouthWest().lat() - bounds2.getSouthWest().lat()) <= tolerance) &&
(Math.abs(bounds1.getSouthWest().lng() - bounds2.getSouthWest().lng()) <= tolerance)) {
return true;
}
return false;
}
2年后编辑:
看起来,在谷歌地图(3.32)的最新实验版本中,即使边界与当前边界相同, bounds_changed
也会被触发。
我将原始示例更新为3.31版本,该版本仍显示原始问题。
解决这个问题的第一部分(知道边界何时完成改变)的最简单方法是使用空闲事件监听器。
如何改变边界,在即将改变它们之前设置此事件。 这样,当界限全部结算后,地图将被注册为空闲状态,空闲事件触发,在这里你可以做你的shiz。 为了防止事件相互堆叠,请同时清除它。
你可能不得不摆弄一下。 说到摆弄,这里是一个小提琴。 在这个小提琴中,我只是每次都设置警报:
https://jsbin.com/kapimov/edit?js,output点击“更改界限”,你会发现它一遍又一遍:)
编辑: 检查是否fitBounds()失败时触发 ,比较中心之前和之后发射fitBounds()。
即使尝试将边界设置为相同的坐标两次,中心似乎也会发生变化并可以进行比较。 中心检查似乎在地图实际移动之前发生,但总是在调用该函数时发生变化。
点击“Fit Current Bounds”按钮两次以查看它的实际运行情况; 第一次'bounds_changed'被触发,第二次它不但中心仍然正确检查。 注释掉fitBounds()函数以查看没有它的情况下中心如何更改。
如问题编辑中所示。 如果你可以使用3.32,那么就使用它。 否则,如果你需要一个在3.32之前工作的解决方案,那么你可以在拟合边界之前简单地将地图平移1个像素。 视觉变化不会触发刷新并强制边界总是改变。
演示:http://jsbin.com/bipekaxosa/1/edit?js,console,output
function pan(map, newCenterLatLng, offsetx, offsety, callback) {
if (!map.getProjection()) {
if (callback) {
return setTimeout(pan, 1, map, newCenterLatLng, offsetx, offsety, callback);
}
throw new Error("You must wait until map.getProjection() is ready. Try using the callback instead");
}
var newCenterLatLngPixels = map.getProjection().fromLatLngToPoint(newCenterLatLng);
var offset = new google.maps.Point(
((typeof (offsetx) == "number" ? offsetx : 0) / Math.pow(2, map.getZoom())) || 0,
((typeof (offsety) == "number" ? offsety : 0) / Math.pow(2, map.getZoom())) || 0
);
map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
newCenterLatLngPixels.x - offset.x,
newCenterLatLngPixels.y + offset.y
)));
if (callback) {
return callback();
}
}
function fitBoundsAndCallback(map, bounds, callback) {
google.maps.event.addListenerOnce(map, "bounds_changed", function() {
if (callback) {
callback();
}
});
// Pan the map 1 pixel up so that bounds will always change
// even in the event you are fitting to the same bounds as before
// Remove this once the move to gmaps 3.32 as bounds_changed works always
this.pan(map, map.getCenter(), 0, 1, function(){
map.fitBounds(bounds);
});
}
链接地址: http://www.djcxy.com/p/81529.html
上一篇: google maps fitBounds callback
下一篇: Greasemonkey script: for Google Maps to disable Zoom on Scroll