如何在Google地图上顺利放大标记？ [英] How to zoom in smoothly on a marker in Google Maps?
问题描述
我希望能够顺利放大Google地图中的标记。如果只需双击设置缩放，则地图突然在该缩放级别上，没有任何平滑过渡。
仅缩放比当前级别更高的一个级别，Google地图显示出很好的平滑过渡。所以它必须能够平滑放大多个层次，但是怎么样？
解决方案最近想要达到同样的效果，并找到了一个解决方案，我对此进行了一篇文章。基本上，只为每个转换设置一个超时是不够的，因为如果Google的缩放效果还没有完成，或者很长时间完成，它可能很容易导致开始 - 停止类型的缩放。
正如马丁所说，这有一些缺点，我不会重申。最终是否使用此选项是您的选择，并且很大程度上取决于用户的CPU功率和/或浏览器。这是一个很好的效果，但一定要打动一些，如果明智地使用。
我的解决方案如下：
//示例标记：
var marker = new google.maps.Marker（{
map：map，
position：new google.maps .LatLng（-20.3,30.3）
}）;
//添加双击事件监听器
google.maps.event.addListener（marker，'dblclick'，function（event）{
map = marker.getMap（）;
map.setCenter（overlay.getPosition（））; //将地图中心设置为标记位置
smoothZoom（map，12，map.getZoom（））; // call smoothZoom ，参数映射，最终缩放级别和起始缩放级别
}）;
//平滑缩放功能
函数smoothZoom（map，max，cnt）{
if（cnt> = max）{
return ;
}
else {
z = google.maps.event.addListener（map，'zoom_changed'，function（event）{
google.maps.event.removeListener（z）;
smoothZoom（map，max，cnt + 1）;
}）;
setTimeout（function（）{map.setZoom（cnt）}，80）; // 80ms是我发现在我的系统上运行良好 - 它可能无法在所有系统上正常工作
$ / code> 基本上，调整缩放级别为1，监听 zoom_changed 事件，等待80毫秒后再调整缩放级别再次等等。这样做的好处在于， zoom_changed 事件似乎是在Google地图提供平滑过渡后调用的，但前实际的图像被加载，所以它不会浪费带宽太多。
超时时间内的80毫秒也是我想出来的一个幻数 - 你建议做一个更彻底的测试，看看在不同的系统和浏览器上有什么作用，并且可能根据你的发现或不同的系统稍微改变算法。
可能也没有必要每次都添加和删除听众，但如果您愿意，您可以自己做出这样的小改进。
I'd like to be able to zoom in smoothly on a marker in Google Maps. If one just sets the zoom on double click, the map is suddenly on that zoom level, without any smooth transition.
Zooming in only one level further than the current level, Google Maps shows a nice smooth transition. So it must be possible to zoom in smoothly for more than one level, but how?
As luck would have it, I wanted to achieve the same effect recently, and found a solution, which I made a post about. Basically, just setting a timeout for each transition isn't enough, because it could easily result in a 'start-stop' kind of zoom if Google's zoom effect isn't finished yet, or has long finished.
As Martin mentioned, there are some disadvantages to this, which I won't reiterate. Whether you use this in the end is your choice, and depends largely on your users' CPU power and/or browser. It is a nice effect though, and sure to impress some, when used wisely.
My solution was the following:
// example marker:
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-20.3,30.3)
});
// add the double-click event listener
google.maps.event.addListener(marker, 'dblclick', function(event){
map = marker.getMap();
map.setCenter(overlay.getPosition()); // set map center to marker position
smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
});
// the smooth zoom function
function smoothZoom (map, max, cnt) {
if (cnt >= max) {
return;
}
else {
z = google.maps.event.addListener(map, 'zoom_changed', function(event){
google.maps.event.removeListener(z);
smoothZoom(map, max, cnt + 1);
});
setTimeout(function(){map.setZoom(cnt)}, 80); // 80ms is what I found to work well on my system -- it might not work well on all systems
}
}
Basically what it comes down to is adjusting the zoom level by one, listening for the zoom_changed event, waiting 80ms before adjusting the zoom-level by one again, etc. What's nice about this is that the zoom_changed event seems to be called after the smooth transition provided by Google Maps, but before the actual images are loaded, so it doesn't waste bandwidth too much.
The 80ms in the timeout is also a magic number I came up with - you would be well-advised to do a more thorough test and see what works on different systems and browsers, and perhaps change the algorithm slightly based on your findings or for different systems.
It's probably also not necessary to add and remove the listener every time, but you can make that small improvement yourself if you so wish.
这篇关于如何在Google地图上顺利放大标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
