Google Maps SVG marker obraz ikony nie są wyświetlane w IE11

Question

Jest to problem na miejscu pracuję na które z jakiegoś powodu znaczniki obraz SVG nie są wyświetlane w IE 11.

Mam dwa zestawy markery:

• domyślny pomniejszeniu ma znaczników PNG na przedmieściach
• powiększonych w ma rozwiązania konkretnych ponumerowanych te SVG

używam awaryjne dla starszych przeglądarek, które d nie obsługuje SVG (testowanie go przy pomocy modernizatora). Używam starych znaczników Google Chart dla IE 11, aby uruchomić go (testując ciąg agenta użytkownika, aby go zidentyfikować).

Chcę wiedzieć, czy ktoś ma pomysł, aby:

• na przyczynę

• czy jest coś spieprzył z trybem IE11 krawędź (przełączyć tryb dokumentu do 10, aby ją do pracy)

• lub coś, co nie udaje się z Google.

Na stronie jest:

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

Widać to nie powieść, jeśli zmienisz ciąg agenta użytkownika w IE 11, pozostawiając ją w trybie Dokument krawędź.

Answer 1

Wydaje się, że Mapy Google tak naprawdę nie obsługiwać za pomocą obrazów SVG markerów w tej chwili. Łatwo to przeoczyć, ponieważ okazuje się, że obrazy znaczników SVG rzeczywiście działają, np. Chrome i Opera.

Jednak interfejs API Map Google (v3) w szczególności udostępnia obiekty Symbol do wyświetlania ścieżek wektorowych w znacznikach mapy. Zauważyłem, że określenie obrazu wektorowego w SVG path notation pozwoliło mu działać w IE i innych przeglądarkach.

Przykład (z Map Google Docs, here):

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 
}); 

(Dzięki this answer zbyt)

Answer 2

Realizacja IE odbiega od standardu SVG w jeden z następujących sposobów:

Właściwości elementu markera dziedziczyć w punkcie odniesienia, nie od przodków elementu markera.

Referencje

MS-SVG: The 'marker' element

Answer 3

Dodaj meta naśladować IE10/IE9 czy SVG obsługuje w niższych wersjach IE.

ie) dla IE-10 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">

Answer 4

Właściwie, dla mnie dodanie znacznika optimized: false i ikonę scaledSize: new google.maps.Size(25, 25) robi to za mnie. Więc nawet jeśli to, co mówi Nick, jest prawdą (że nie jest oficjalnie obsługiwane), działa.

Znaczniki SVG pojawiają się w IE11. Wygląda na to, że scaledSize dodaje styl width i height na elemencie <img>, co nie jest pewne, w tym przypadku, co robi optimized.

Przykład:

 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) 
      } 
     }); 

kredytowe: Google Maps SVG marker doesn't display on IE 11