谷歌地图 fitBounds 回调
google maps fitBounds callback
我知道如果边界发生变化,会触发一个bounds_changed
事件,但是我需要知道fitBounds何时完成(当边界发生变化或边界保持不变时)。
谷歌有某种宽容,如果边界变化很小,它实际上不会改变边界/调用bounds_changed。我需要知道这种情况何时发生。
我已经成功地完成了超时,但是当触发时间超过 100 毫秒时,它似乎很笨拙,并且可能容易出现一些错误bounds_changed。
请参阅示例: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版,该版本仍然显示原始问题。
解决此问题第一部分(知道边界何时完成更改)的最简单方法是使用空闲事件侦听器。
无论如何更改边界,请在要更改边界之前设置此事件。这样,当边界全部确定后,地图将注册为空闲,空闲事件将触发,您可以在其中执行任务。为防止事件相互叠加,请同时清除它。
您可能需要稍微摆弄一下。说到小提琴,这里有一个小提琴。在这个小提琴中,我只是将警报设置为每次发生:
https://jsbin.com/kapimov/edit?js,output 单击"更改边界",您将看到它一遍又一遍地发生:)
编辑:要检查 fitBounds() 在失败时是否触发,请比较触发 fitBounds() 之前和之后的中心。
即使尝试将边界设置为同一坐标两次,中心似乎也会发生变化并且可以进行比较。中心检查似乎发生在边界地图实际移动之前,但在调用该函数时总是会发生变化。
点击"适合当前边界"按钮两次以查看其运行情况; 第一次"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);
});
}
- AngularJS:我可以跳过函数参数回调吗
- 要求未定义JS回调参数
- MeteorJS:在带有回调的vzaar api上正确使用wrapAsync
- 自引用回调
- 测试Angular Service解决错误回调中的promise
- 如何将一个JavaScript函数回调为多个函数
- JavaScript回调函数
- 用于回调的javascript参数
- 将json回调数据转换为日期
- 承诺在非节点式回调上使用Bluebird
- 如何在回调函数中执行流
- 回调函数中传递参数的困难(Google Map API Markers)
- Soundcloud Javascript SDK 3.0-回调无法读取属性'connectCallback
- 如何使用jqueryAJAX从页面中回调多个变量
- jquery Onclick函数带有导致双击的回调排序函数
- Javascript点击事件回调不起作用
- 一旦加载并渲染了角度引导typeahead,就使用回调
- 成功回调永远不会被JSONP请求调用
- 谷歌地图 fitBounds 回调
- 在传单中,fitBounds是否有回调