Google Maps SVG Bild Markierungssymbole zeigt, die nicht in IE11

Es gibt ein Problem auf einer Seite, die ich aus irgendeinem Grund an, dass die Arbeit wurden die SVG Bildmarkierungen werden nicht angezeigt in IE 11.Google Maps SVG Bild Markierungssymbole zeigt, die nicht in IE11

Ich habe zwei Sätze von Marker:

der Standard hat Marker PNG für die
gezoomt Vorstädten herausgezoomt, um in bestimmten nummerierten SVG diejenigen

ich benutze einen Rückfall für ältere Browser-Adresse hat, die d on't SVG unterstützen (testet es mit modernizr). Ich verwende die alten Google Chart-Markierungen für IE 11, um sie zum Laufen zu bringen (indem ich die User-Agent-Zeichenfolge teste, um sie zu identifizieren).

Ich möchte wissen, ob jemand eine Idee, hat:

die Ursache
ob es etwas vermasselt mit IE11 Edge-Modus (schalten Sie den Dokumentenmodus auf 10, es zu erhalten zu arbeiten)
oder etwas, das mit Google scheitert.

Die Seite ist:

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

Sie können sehen, es fehlschlagen, wenn Sie den User-Agent-String in IE 11 ändern, während es in Edge-Dokument-Modus zu verlassen.

Quelle

2013-11-01 Harris

Sie sollten einige Proof-of-Concept-Code auf Ihre Frage, nicht nur einen Link zu einer Webseite hinzuzufügen. – duncan

Konnte die mögliche Arbeitslösung hier sein: http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

Es scheint, dass Google Maps nicht wirklich unterstützen. Diese Tatsache ist leicht zu übersehen, weil sich herausstellt, dass SVG-Marker-Bilder tatsächlich funktionieren, z. Chrome und Opera.

Das Google Maps-API (v3) bietet jedoch speziell Symbol Objekte zum Anzeigen von Vektorpfaden in Kartenmarkierungen. Ich fand, dass das Spezifizieren des Vektorbildes in SVG path notation erlaubte, in IE und anderen Browsern zu arbeiten.

Beispiel (von Google Maps 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 
});

(Dank this answer auch)

Quelle

2014-10-28 12:24:38

das ist alles sehr gut, aber wie erstelle ich diese Objektnotation (GoldStar) für eine Svg-Datei, die mehrere Pfade mit unterschiedlichen Farben enthält. Wie kombiniere ich sie in dieser Notation? – Prabhas

Das ist wirklich eine separate Frage! Obwohl laut [diese Antwort] (http://stackoverflow.com/a/26321678/180500) Symbole ein einzelner Pfad sein müssen, ist es möglicherweise nicht möglich. –

Dies funktioniert nur für einfache einfarbige Symbole. Komplexe Layered SVG-Icons haben Probleme, die hier gelöst werden können: http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

-1

Die IE Implementierung weicht von der SVG-Standard auf folgende Weise:

Eigenschaften eines Markierungselement an der Stelle des Bezugs erben, nicht von den Vorfahren des Markerelements. zur Zeit unter Verwendung von SVG-Bilder für Marker

Referenzen

MS-SVG: The 'marker' element

Quelle

2014-02-28 23:34:15

Der Begriff "Marker" wird hier für diese Antwort falsch interpretiert. –

-1

meta hinzufügen IE10/IE9, wenn der SVG unterstützt in niedrigeren IE-Versionen zu emulieren.

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

Quelle

2015-10-21 10:44:01 mysticmo

Dies tat nichts für mich, wenn komplexe SVG-Icons verwenden (mehr als eine Form). –

Eigentlich für das Hinzufügen von mir Marker optimized: false und Symbol scaledSize: new google.maps.Size(25, 25) tut es für mich. Auch wenn das, was Nick F sagt, wahr ist (dass es nicht offiziell unterstützt wird), funktioniert es.

SVG-Marker werden in IE11 angezeigt. Es scheint, dass die scaledSize fügt einen Stil width und height auf dem <img> Element, unsicher, was optimized in diesem Fall tut.

Beispiel:

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

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

Quelle

2017-04-26 19:33:55

Google Maps SVG Bild Markierungssymbole zeigt, die nicht in IE11

Antwort

Verwandte Themen