Question

我正在使用map.data.addGeoJson()将325个要素添加到4个不同的地图（以不同的缩放级别）。大约一半的要素是标记，另一半是多边形。多边形几乎是即时渲染的。但是标记又需要6整秒钟才能显示在地图上。

如果我仅构建一张地图，则标记仍需要0.5-2秒才能显示。

我能做些什么来加快速度吗？

这是我的代码：

function addSites(map, geoJSON) {
    map.data.setStyle(setSitesStyle);
    map.data.addGeoJson(geoJSON)
}

function setSitesStyle(feature) {

    var searchDist = getSearchDistFromListTypes(feature.getProperty('ListTypes').split('~'));

    return ({
        fillColor: searchDist.FontColor,
        strokeColor: searchDist.FontColor,
        strokeWeight: 1,
        fillOpacity: .5,
        clickable: false,
        icon: {
            url: 'images/' + searchDist.Marker + 's.png',
            size: new google.maps.Size(26 , 38),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(13, 34),
            label: feature.getProperty('MarkerNo')
        }
    });
}

更新：我尝试使用简单的SVG图标，但性能没有什么不同。

Answer 1

问题在于DOM在此页面上相当大，Google Maps花了一段时间才将所有元素添加到DOM中。

在我的情况下，页面为95％Handlebars.js，所以我要做的是编译所有的车把模板，并记住数组中的结果HTML。然后仅将地图页面的HTML推送到DOM中，并处理地图数据（这现在真是太快了。）然后最终将HTML的其余部分加载到DOM中，这也非常快。

由于可以在页面中散布多个地图，因此想出一种简单而强大的方法将所有这些正确地重新编织在一起是一个小挑战，但是最后我很高兴。

Google Maps API V3使用data.addGeoJson缓慢添加标记

1 个答案: