Google maps 谷歌地图API Javascript v3平滑panTo
我在这里和那里做了不少搜索。他们都没有给出令人满意的答案,我们只知道Google Maps API v3有一个限制,即如果panTo目标的高度/宽度超过当前中心的1个窗口,它将不会平滑 尽管如此,我还是希望实现“稍微”平滑,而不仅仅是“跳跃”到目标 以下是我的解决方案(不完美,但我认为它比跳跃更好):Google maps 谷歌地图API Javascript v3平滑panTo,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,我在这里和那里做了不少搜索。他们都没有给出令人满意的答案,我们只知道Google Maps API v3有一个限制,即如果panTo目标的高度/宽度超过当前中心的1个窗口,它将不会平滑 尽管如此,我还是希望实现“稍微”平滑,而不仅仅是“跳跃”到目标 以下是我的解决方案(不完美,但我认为它比跳跃更好): 计算当前位置和目标位置之间的距离 分成几个部分,每个部分都不到一个窗口 panTo每个部分实现“分段”平滑动画 可以通过以下算法找到每个截面目标: 电流为c(x,y) 目标是t(x,y) 节数为
- 电流为c(x,y)
- 目标是t(x,y)
- 节数为s
- 每个截面是c(x)+(t(x)-c(x))/s,c(y)+(t(y)-c(y))/s
OK,我终于想出了一些类似的方法,但它确实有效(但没有考虑缩放级别)
var distance = Math.sqrt(Math.abs(Math.pow(lastLocation.lat() - status.Lat, 2)) + Math.abs(Math.pow(lastLocation.lng() - status.Lng, 2)));
//console.info('last:' + lastLocation.lat() + ',' + lastLocation.lng());
//console.info('new:' + status.Lat + ',' + status.Lng);
//console.info('distance:' + distance);
var smoothFactor = 8.0 / 1440; //hard code for screen size without considering zoom as well...
var factor = $(window).width() * smoothFactor;
smoothPanSections = [];
var sectionCount = Math.ceil(distance / factor);
var sectionLat = (status.Lat - lastLocation.lat()) / sectionCount;
var sectionLng = (status.Lng - lastLocation.lng()) / sectionCount;
for (var i = 1; i <= sectionCount; i++) {
if (i < sectionCount) {
smoothPanSections.push({ Lat: lastLocation.lat() + sectionLat * i, Lng: lastLocation.lng() + sectionLng * i });
}
else
smoothPanSections.push({ Lat: status.Lat, Lng: status.Lng });
}
panStatus();
function panStatus() {
if (smoothPanSections.length > 0) {
var target = smoothPanSections.shift();
//still have more sections
if (smoothPanSections.length > 0) {
google.maps.event.addListenerOnce(map, 'idle', function () {
window.setTimeout(function () {
panStatus();
}, 100);
});
}
var location = new google.maps.LatLng(target.Lat, target.Lng);
map.panTo(location, zoomSize);
}
}