【问题标题】:Google Maps performance issues with KML overlaysKML 叠加层的 Google 地图性能问题
【发布时间】:2013-05-26 02:55:57
【问题描述】:

我有一个应用程序,它允许用户在地图上绘制形状(折线)并将它们与一些元数据(名称、描述等)一起保存到数据库(通过 AJAX)。我最近移植了代码以使用 GMap APIv3 而不是 v2。它似乎工作正常,但在过去的几周里,当用户有许多形状(约 20 个)和许多点(每个形状 80-200 个)时,我注意到了一些可怕的性能问题。

一个用户的地图变得如此糟糕,以至于浏览器冻结(IE9 和最新的 Chrome)。当应用程序使用 v2 GMap 时从未发生过这种情况,我无法确认 v3 是否总是这样。我正在使用 blitz-gmap (https://code.google.com/p/blitz-gmap-editor/) 来处理绘图元素和以下代码来解析 KML 并创建叠加层。我使用叠加层来引用另一个 div 中的形状以进行隐藏和删除。我还可以向 KML 提供应用程序冻结的原因,但它在 Google 地球和 GMap4 (http://www.mappingsupport.com/p/gmap4.php) 中都能正常加载。我是在做一些公然马虎的事情吗?

编辑:这是导致问题的 KML...http://pastebin.com/ksB6zAun 即使在我删除了 4 个最大的形状(海岸线形状)之后,它仍然会冻结浏览器。

this.setMapFromKML = function (kmlString) {
    if (kmlString.length == 0) {
        return false;
    }
    if (typeof geoXML3 == "undefined") { // check for include of geoxml3 parser
        // http://code.google.com/p/geoxml3/
        alert("geoxml3.js not included");
        return;
    }
    if (!geoXml)
        geoXml = new geoXML3.parser({
            map:mapObj,
            zoom:false,
            suppressInfoWindows:true
        });

    geoXml.parseKmlString(kmlString);
    var tmpOverlay, ovrOptions;
    for (var m = 0; m < geoXml.docs[0].placemarks.length; m++) {
        if (geoXml.docs[0].placemarks[m].Polygon) {

            tmpOverlay = geoXml.docs[0].placemarks[m].polygon;
            if (isEditable) {
                tmpOverlay.setEditable(true);
            }
            tmpOverlay.type = "polyline";
        } else if (geoXml.docs[0].placemarks[m].LineString) {

            tmpOverlay = geoXml.docs[0].placemarks[m].polyline;
            if (isEditable) {
                tmpOverlay.setEditable(true);
            }
            tmpOverlay.type = "polyline";
        } else if (geoXml.docs[0].placemarks[m].Point) {

            tmpOverlay = geoXml.docs[0].placemarks[m].marker;
            tmpOverlay.type = "marker";
        }


        var uniqueid = uniqid();
        tmpOverlay.uniqueid = uniqueid;
        if (geoXml.docs[0].placemarks[m].id) {
            tmpOverlay.id = geoXml.docs[0].placemarks[m].id;
        } else {
            tmpOverlay.id = -1;
        }
        if (geoXml.docs[0].placemarks[m].name) {
            tmpOverlay.title = geoXml.docs[0].placemarks[m].name;
        } else {
            tmpOverlay.title = "";
        }

        if (geoXml.docs[0].placemarks[m].description) {
            tmpOverlay.content = geoXml.docs[0].placemarks[m].description;
        } else {
            tmpOverlay.content = "";
        }

        //attach the click listener to the overlay
        AttachClickListener(tmpOverlay);

        //save the overlay in the array
        mapOverlays.push(tmpOverlay);
    }
    mapObj.fitBounds(geoXml.docs[0].bounds); //adjust map to show all filters
}

【问题讨论】:

  • 您能提供 KML 吗?我怀疑这只是被渲染为本机 Google Maps API v3 对象的顶点数量。是否仅在对象可编辑时发生?
  • 我提供了一个指向 KML 的 pastebin 的链接。我没有尝试让它们不可编辑,但我想这可能是它在 GMap4 中加载良好的原因。
  • 如果我在点击 this page 上的“解析 KML 到地图”之前切换编辑模式,它会显示 OK(至少在 Chrome 和 IE10 中)

标签: google-maps kml


【解决方案1】:

使 all 多段线可编辑(每个顶点都有一个可拖动的标记)会显着降低性能。只允许编辑那些实际需要更改的多段线(可能一次只能更改一条),并使其默认为不可编辑。

【讨论】:

  • 她现在像鼻涕一样加载光滑。太感谢了!我将 tmpOverlay.setEditable(true) 更改为 false 并关闭了点击监听器。现在可以这样做,但我可能会在将来添加功能以通过单击打开单个形状的编辑。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-06-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-06-06
相关资源
最近更新 更多