我有一个应用程序,允许用户在地图上绘制形状(折线)并将它们与一些元数据(名称、描述等)一起保存到数据库(通过 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
}