Les icônes de repère d'image de Google Maps SVG n'apparaissent pas dans IE11
il y a un problème sur un site sur lequel j'ai travaillé que pour une raison quelconque les marqueurs D'image SVG n'apparaissent pas dans IE 11.
j'ai deux séries de marqueurs:
- le défaut de zoom a PNG marqueurs pour la banlieue
- zoom a l'adresse numéroté spécifique SVG
j'utilise un repli pour les navigateurs plus anciens qui ne prennent pas SVG en charge (en le testant avec modernizr). Je suis utiliser les anciens marqueurs Google Chart pour IE 11 pour le faire fonctionner (tester la chaîne user agent pour l'identifier).
je veux savoir si quelqu'un a une idée de:
-
la cause
-
s'il s'agit de quelque chose qui a foiré avec le mode Edge IE11 (passez le mode document à 10 pour le faire fonctionner)
-
ou quelque chose qui ne fonctionne pas avec Google.
le site est:
http://artstrail.org.au/arts-trail.php
vous pouvez le voir échouer si vous changez la chaîne de l'agent utilisateur dans IE 11 tout en le laissant dans le mode Edge Document.
4 réponses
il semble que Google Maps ne supporte pas vraiment L'utilisation D'images SVG pour les marqueurs pour le moment. Ce fait est facile à ignorer, car il s'avère que les images SVG marker fonctionnent effectivement, par exemple. Chrome et Opera.
cependant, L'API GoogleMaps (v3) fournit spécifiquement les objets Symbol pour afficher les chemins vectoriels dans les repères de carte. J'ai trouvé que spécifier l'image vectorielle dans SVG chemin notation lui permettait de travailler dans IE et d'autres navigateurs.
exemple (de Google Maps docs, ici ):
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
});
(Merci à cette réponse )
en fait, pour moi Ajouter marqueur optimized: false et l'icône scaledSize: new google.maps.Size(25, 25) le fait pour moi. Donc même si ce que dit Nick F est vrai (qu'il n'est pas officiellement soutenu), il fonctionne.
commencent à apparaître dans IE11. Il semble que le scaledSize ajoute un style width et height sur l'élément <img> , incertain de ce que optimized fait dans ce cas.
exemple:
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)
}
});
crédit: Google Maps SVG marqueur ne s'affiche pas sous IE 11
L'IE de la mise en œuvre s'écarte de la norme SVG de la manière suivante:
les propriétés d'un élément marqueur sont héritées au point de référence, et non des ancêtres de l'élément marqueur.
Références
ajoute meta pour émuler IE10/IE9 si le SVG prend en charge les versions inférieures D'IE.
ie) for IE-10 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">