我正在测试 Google Maps V3 API 的新 Symbols 对象。我已经为 400 个标记的每个“图标”属性设置了相同的符号路径和颜色。
当使用 Firefox 或 Chrome 查看示例页面时,所有内容加载速度都很快并且运行良好。
不幸的是……Internet Explorer 的性能真的很差。加载时间以及我尝试在 map 上拖动或缩放时表现不佳。
这是一个简单的 javascript 示例,您可以使用它在 IE 上进行测试
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers() {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 400; i++) {
var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: latLng,
icon:{
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
strokeWeight: 0,
scale: 4
},
map: map
});
}
}
当您将它与一些额外的属性和事件一起使用时,情况会变得更糟!但是如果你只是删除标记的“图标”属性,基本的谷歌标记就会出现,一切都和 Chrome 和 Firefox 一样快......
有人知道为什么在 IE 上使用 Symbol 时速度这么慢吗?我怎样才能加快这个过程。
谢谢!
最佳答案
Google map 上的符号图标是新 VectorIcons 的一部分.这些不是位图,但被描述为 SVG 格式的矢量路径。这些基本上是带有很多点的路径,这些点会在形状完成之前绘制。
现在你有很多图标,这意味着需要绘制很多 SVG 路径。当您在不同的浏览器中看到不同的渲染速度时,您基本上是在比较浏览器的 SVG 渲染引擎 - 从您的应用程序来看,IE9 似乎比其他浏览器慢。
我不认为有什么方法可以加快速度。您可以减少显示标记的数量(例如使用聚类),直到达到可接受的渲染速度。或者您可以简单地使用位图图标。
关于javascript - Marker 中的新 Google Maps Symbol 对象使 IE 非常慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12482950/