Google maps api 3 谷歌地图api v3无平滑拖动
我开始使用MapsAPI v3实现我的软件。不幸的是，我发现V3API有一些严重的问题，这让我不再使用商业许可证 我的客户使用高清分辨率为1920x1080的显示器，地图占据了90%的屏幕空间。不幸的是，我所说的问题来了。当我在地图上用鼠标点击并开始拖动它时，它是非常不，真的很烦人。所有的乐趣都消失了 我使用windows XP、windows 7和windows 8尝试了一些不同的场景。我使用的浏览器是最新版本的Firefox、Chrome和IE。 以下是我尝试拖动地图时的结果：Google maps api 3 谷歌地图api v3无平滑拖动,google-maps-api-3,lag,Google Maps Api 3,Lag,我开始使用MapsAPI v3实现我的软件。不幸的是，我发现V3API有一些严重的问题，这让我不再使用商业许可证 我的客户使用高清分辨率为1920x1080的显示器，地图占据了90%的屏幕空间。不幸的是，我所说的问题来了。当我在地图上用鼠标点击并开始拖动它时，它是非常不，真的很烦人。所有的乐趣都消失了 我使用windows XP、windows 7和windows 8尝试了一些不同的场景。我使用的浏览器是最新版本的Firefox、Chrome和IE。 以下是我尝试拖动地图时的结果： 小屏幕分辨率
- 地图v2：
- 地图v3：
- 这里也一样。我注意到v3在平移地图时会触发很多事件，浏览器往往会阻塞（尤其是FF）。我这么说是因为我也使用了Bing Maps API，而
viewchangecenter\u changeaddThrottledHandler（）mousemovecenter\u changedmousemovemousemovecenter\u changed#mapbody主体#map#mapbodyperiodspacemousemove<html>
<head>
<style type='text/css'>
#map {
position: absolute;
width: 100%;
height: 100%;
margin: 20px;
}
</style>
<script type='text/javascript'>
var last = {time : new Date(), // last time we let an event pass.
x : -100, // last x position af the event that passed.
y : -100}; // last y position af the event that passed.
var period = 100; // ms - don't let pass more than one event every 100ms.
var space = 2; // px - let event pass if distance between the last and
// current position is greater than 2 px.
function init_map() {
map_div = document.getElementById("map")
// map
var map_options = {
center: new google.maps.LatLng(45.836454, 23.372497),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map"), map_options);
// register event handler that will throttle the events.
// "true" means we capture the event and so we get the event
// before Google Maps gets it. So if we cancel the event,
// Google Maps will never receive it.
map_div.addEventListener("mousemove", throttle_events, true);
};
function throttle_events(event) {
var now = new Date();
var distance = Math.sqrt(Math.pow(event.clientX - last.x, 2) + Math.pow(event.clientY - last.y, 2));
var time = now.getTime() - last.time.getTime();
if (distance * time < space * period) { //event arrived too soon or mouse moved too little or both
console.log("event stopped");
if (event.stopPropagation) { // W3C/addEventListener()
event.stopPropagation();
} else { // Older IE.
event.cancelBubble = true;
};
} else {
console.log("event allowed: " + now.getTime());
last.time = now;
last.x = event.clientX;
last.y = event.clientY;
};
};
</script>
</head>
<body onload = "init_map()">
<div id="map"></div>
</body>
</html>