Значки маркеров изображений Google Maps SVG не отображаются в IE11

На сайте, над которым я работал, есть проблема: по какой-то причине маркеры изображений SVG не отображаются в IE 11.

У меня есть два набора маркеров:

  • по умолчанию уменьшенный масштаб имеет маркеры PNG для пригородов
  • в увеличенном масштабе есть адресные пронумерованные SVG

Я использую запасной вариант для старых браузеров, не поддерживающих SVG (тестирую с помощью modernizr). Я использую старые маркеры Google Chart для IE 11, чтобы заставить его работать (тестирование строки пользовательского агента для ее идентификации).

Я хочу знать, есть ли у кого-нибудь идея относительно:

  • причина

  • что-то не так с режимом IE11 Edge (переключите режим документа на 10, чтобы заставить его работать)

  • или что-то, что терпит неудачу с Google.

Сайт:

http://artstrail.org.au/arts-trail.php

Вы можете увидеть сбой, если вы измените строку пользовательского агента в IE 11, оставив его в режиме Edge Document.


debugging svg google-maps-markers internet-explorer-11 backwards-compatibility
person Harris    schedule 01.11.2013    source источник
comment
Вы должны добавить к своему вопросу некоторый код проверки концепции, а не просто ссылку на веб-сайт.   -  person duncan    schedule 01.11.2013
comment
Возможное рабочее решение может быть здесь: stackoverflow.com/questions/27261346/   -  person Mike Kormendy    schedule 22.09.2016

Ответы (4)


arrow_upward
6
arrow_downward

Похоже, что Google Maps на данный момент не поддерживает использование изображений SVG для маркеров. Этот факт легко упустить из виду, потому что оказывается, что изображения маркеров SVG действительно работают, например. Хром и Опера.

Однако Google Maps API (v3) специально предоставляет объекты Symbol для отображения векторных пути в маркерах карты. Я обнаружил, что указание векторного изображения в обозначении пути SVG позволяет ему работать в IE и других браузерах.

Пример (из документов Google Maps, здесь):

var goldStar = {
  path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
  fillColor: 'yellow',
  fillOpacity: 0.8,
  scale: 1,
  strokeColor: 'gold',
  strokeWeight: 14
};

var marker = new google.maps.Marker({
  position: map.getCenter(),
  icon: goldStar,
  map: map
});

(Спасибо и за этот ответ)

person Nick F    schedule 28.10.2014
comment
все это очень хорошо, но как мне создать эту нотацию объекта (goldStar) для файла svg, содержащего несколько путей с разными цветами. Как мне их объединить в этой нотации. - person Probosckie; 08.10.2015
comment
Это вообще отдельный вопрос! Хотя, согласно этому ответу, значки должны быть одним путем, поэтому это может быть невозможно. - person Nick F; 08.10.2015
comment
Это работает только для простых одноцветных значков. У сложных многоуровневых значков SVG есть проблемы, которые можно решить здесь: stackoverflow.com/questions/27261346/ - person Mike Kormendy; 22.09.2016

arrow_upward
5
arrow_downward

На самом деле, добавление маркера optimized: false и значка scaledSize: new google.maps.Size(25, 25) делает это за меня. Так что, даже если то, что говорит Ник Ф, правда (официально это не поддерживается), это работает.

Маркеры SVG начинают появляться в IE11. Кажется, что scaledSize добавляет стиль width и height к элементу <img>, не знаю, что делает optimized в этом случае.

Пример:

        var marker = new google.maps.Marker({
            map: map,
            position: poi.geometry.location,
            title: poi.name,
            zIndex: 99,
            optimized: false,
            icon: {
                url: 'loremipsum.svg',
                scaledSize: new google.maps.Size(25, 25),
                size: new google.maps.Size(25, 25),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(12.5, 12.5)
            }
        });

Кредит: маркер Google Maps SVG не отображается в IE 11< /а>

person Community    schedule 26.04.2017

arrow_upward
-1
arrow_downward

Реализация IE отличается от стандарта SVG следующими способами:

Свойства элемента маркера наследуются в точке ссылки, а не от предков элемента маркера.

Ссылки

MS-SVG: элемент "маркер"

person Community    schedule 28.02.2014
comment
Этот термин «маркер» неправильно интерпретируется здесь для этого ответа. - person Mike Kormendy; 21.09.2016

arrow_upward
-1
arrow_downward

Добавьте метаданные для эмуляции IE10/IE9, если SVG поддерживает более ранние версии IE.

т.е.) для IE-10 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">

person mysticmo    schedule 21.10.2015
comment
Это ничего не дало мне при использовании сложных значков SVG (более одной формы). - person Mike Kormendy; 22.09.2016