2

Google maps api 让您以 SVG 路径的形式指定自定义标记图标。在我的快速机器上，在 IE9 或更少的设备上显示 500 个这些标记（SVG 路径）会导致浏览器缓慢爬行并挂起。在 Chrome、FF、Opera 和 Safari 以及 IE10 中，在这些更高的数字下一切正常，但在 IE9 及以下版本中则不行。

寻找一种方法来加速它的 IE。

jsfiddle 示例

// this will cripple IE 9 and below
for (var i = 0; i < 500; i++)
{
    new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(locations[i].LATITUDE, locations[i].LONGITUDE),
        icon: {
            path: 'M 5, 5 m -3.75, 0 a 3.75,3.75 0 1,0 7.5,0 a 3.75,3.75 0 1,0 -7.5,0', //a small circle
            fillColor: 'red',
            fillOpacity: 1,
            strokeColor: 'blue'
        }
    });
}
4

1 回答 1

1

好的，我找到了一种方法来加载 IE9 及以下版本中的所有符号而不会挂起，但它不像其他浏览器那样一次完成。基本上，您必须使用setTimout. 这允许 IE9 及以下浏览器在继续加载所有剩余图像的同时继续处理用户交互。如果您尝试加载太多太快而没有让浏览器休息，它的渲染将开始变得不稳定并且似乎挂起。

重要说明：似乎渲染速度越慢，越不稳定，尤其是当它挂起时，尽管我没有验证这一点。就个人而言，我一次喜欢一个，因为它向用户显示它仍在加载标记。

更新的小提琴显示了节流的改进。

我最终使用的 javascript：
我没有像在小提琴中那样将它们呈现在下面的块中，因为它似乎（对我而言）以短 200 毫秒的间隔一次处理它们效果最好。

if (ie >= 7 && ie <= 9)
{
    $.each(arrMarkers, function (index, marker)
    {
        // throttle the addition of markers to the map
        setTimeout(function ()
        {
            marker.setMap(map);
        }, index * 200);
    });
}

var ie = (function ()
{
    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;
} ());
于 2013-08-13T19:44:03.143 回答