Question

我的问题：
当地图上显示大量标记和折线时，如何让谷歌地图移动窒息？

我正在就我开发的应用程序提出建议。

只有在使用鼠标向上，向下，向左或向右移动地图时，才会出现问题。

该应用程序在地图上显示大约1000段折线和大约700个标记。

所有数据位于7个KML文件。

所有折线都是从A到B的方向段，因此它们有很多点。所以我认为大部分问题都是由折线的大小和数量引起的。

类似的主题：
- Need guidance on a Google Map application that has to show 250 000 polylines
- google maps api v3 no smooth dragging
- Mapping 400MB KML data in Google Maps - how?

谢谢。

其他人已经针对类似问题打开了一个问题，所以在这种情况下我不认为我是孤军奋战 https://code.google.com/p/gmaps-api-issues/issues/detail?id=5665

Answer 1

我尝试了一种改善运动的解决方案，但它并没有完全解决问题 google maps api v3 no smooth dragging
http://jsfiddle.net/CX4gN/3/

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  = 40;   // 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;
    };
};

此代码功能齐全，但正如我之前所说，它并没有完全解决问题。

其他解决方案将受到欢迎。

[编辑2014-03-14] 它终于是我找到的最好的解决方案，我在生产中测试了它，它终于工作得很好。

如何在使用大量标记和折线平移地图时限制谷歌地图api延迟？

1 个答案: