IE9 и ниже начинают тормозить и зависать при добавлении большого количества маркеров карты Google через символ (путь SVG)

Google Maps API позволяет указать собственный значок маркера в виде пути SVG. На моей быстрой машине отображение 500 таких маркеров (путей SVG) в IE9 или меньше приводит к медленному сканированию и зависанию браузера. Все отлично работает в 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'
        }
    });
}

svg google-maps-api-3 google-maps-markers internet-explorer vml
person johntrepreneur    schedule 13.08.2013    source источник
comment
более старые версии IE используют VML для отображения SVG --› Нет. VML был предшественником SVG и используется вместо SVG на сайтах, ориентированных на IE8 и более ранние версии.   -  person EricLaw    schedule 13.08.2013

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, я нашел способ загрузить все символы в 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;
} ());
person johntrepreneur    schedule 13.08.2013