Google Maps SVG marker ne s'affiche pas sur IE 11
mon marqueur de carte SVG disparaît sur IE11. Il est visible dans Chrome, Firefox, Safari, IE9 & 10, mais pas 11. J'ai téléchargé un JSfiddle de mon code actuel. Je ne peux pas dire si c'est moi ou un bug avec Google Maps.
j'ai téléchargé un JSfiddle de mon code actuel
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyfFUUVxVyoCicnttJfj-w63wzfbTKV3Y&sensor=false">
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script>
function initialize() {
var sanfrancisco = new google.maps.LatLng(37.78062,-122.397203);
var mapOptions = {
zoom: 18,
zIndex:0,
center: sanfrancisco,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
},zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// var image = 'img/1p_marker3.png';
var image = 'http://firstperson.is/assets/img/contact/map_marker.svg';
var marker = new google.maps.Marker({
position: sanfrancisco,
map: map,
icon: image
});
var roadAtlasStyles = [
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#003a70" }
]
},{
"featureType": "landscape",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#0075c9" }
]
},{
"featureType": "administrative.land_parcel",
"stylers": [
{ "visibility": "off" }
]
},{
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#0075c9" }
]
},{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{ "color": "#0075c9" }
]
},{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{ "color": "#d0343a" }
]
},{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{ "color": "#ff4539" }
]
},{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{ "color": "#0075c9" }
]
},{
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{ "invert_lightness": true },
{ "hue": "#0077ff" }
]
},{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" },
{"color":"#ffffff"}
]
},{
"featureType": "poi.park",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "poi.sports_complex",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" },
{"color":"#ffffff"}
]
},{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "administrative.neighborhood",
"elementType": "labels.text",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.province",
"elementType": "geometry",
"stylers": [
{ "visibility": "on" },
{ "weight": 0.9 }
]
}
];
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('usroadatlas', usRoadMapType);
map.setMapTypeId('usroadatlas');
// var transitLayer = new google.maps.TransitLayer();
// transitLayer.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
5 réponses
ajouter scaledSize à l'image/icône et optimized: false au marqueur résolu pour moi.
http://jsfiddle.net/kQRbr/31 /
var image = {
url: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-marker.svg',
scaledSize: new google.maps.Size(100, 100),
}
var marker = new google.maps.Marker({
position: sanfrancisco,
map: map,
optimized: false,
icon: image
});
il semble que Google Maps ne supporte pas actuellement L'utilisation de SVGs pour les images marqueur. Vous pouvez cependant avoir des icônes de marqueurs vectoriels, en utilisant un objet symbole .
pour plus de détails, voir ma réponse à cette question .
Je ne suis pas sûr que cela puisse aider:
il est sage de définir aussi width de la zone de carte. Par exemple:
#map-canvas { height: 100%; width: 100%; }
IE10 était le seul à se plaindre qu'il n'y a pas la ligne suivante au début
<!DOCTYPE html>
Un commentaire: marqueur est énorme en gardant la même taille lorsque vous effectuez un zoom arrière.
n'a pas aidé. Code d'exécution (avec la ligne DOCTYPE) à BrowserStack j'ai eu un message dans la console:
InvalidStateError (line 39)
et cette ligne ne vient pas du script parce que si je change/supprime quelque chose, le message est le même.
ils disent qu'ils l'ont fixé ici: https://connect.microsoft.com/IE/feedback/details/793569/ie-11-does-not-display-google-map-markers ... Je viens de vérifier sur ma machine 8.1 et ça ne marche pas.
Je ne l'ai pas encore testé mais peut-être que ce type a compris: http://powerhut.co.uk/googlemaps/custom_markers.php
j'ai eu le même problème parce que mon ActiveX-filtre a été vérifié. Décochez (properties-safety-activeX filter), puis vous pourrez voir vos marqueurs à nouveau. L'erreur s'est produite parce que j'utilise geoxml3.