1

ユーザーがマップ上に図形 (ポリライン) を描画し、メタデータ (名前、説明など) と共に (AJAX 経由で) データベースに保存できるアプリケーションがあります。最近、v2 ではなく GMap APIv3 を使用するようにコードを移植しました。正常に動作しているように見えましたが、ここ数週間で、ユーザーが多くのポイント (形状ごとに 80-200) を持つ多くの形状 (~20) を持っている場合に、いくつかの恐ろしいパフォーマンスの問題に気付きました。

ブラウザがフリーズする (IE9 と最新の Chrome の両方) 1 人のユーザーのマップでひどくなります。これは、アプリが v2 GMap を使用したときは発生しませんでした。v3 で常にこのようになっていたかどうかは確認できません。blitz-gmap ( https://code.google.com/p/blitz-gmap-editor/ ) を使用して描画要素を処理し、次のコードを使用して KML を解析してオーバーレイを作成しています。オーバーレイを使用して、非表示と削除のために別の div から形状を参照します。アプリがフリーズする原因となる KML を提供することもできますが、Google Earth と 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
}
4

1 に答える 1