webentwicklung-frage-antwort-db.com.de

Die Google Maps-SVG-Markierung wird nicht angezeigt IE 11

Meine SVG-Kartenmarkierung verschwindet im IE11. Es ist in Chrome, Firefox, Safari, IE9 und 10 sichtbar, aber nicht in 11. Ich habe ein JS-Fiddle meines aktuellen Codes hochgeladen. Ich kann nicht erkennen, ob es sich um mich oder um einen Fehler bei Google Maps handelt.

Ich habe ein JSfiddle meines aktuellen Codes hochgeladen

<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>
41
creativename

Das Hinzufügen von scaledSize zum Bild/Symbol und optimized: false zum Marker löste es für mich.

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
});
86
Johan B

Es scheint, dass Google Maps die Verwendung von SVGs für Markierungsbilder derzeit nicht unterstützt. Sie können jedoch Vektormarkierungssymbole verwenden, indem Sie ein Symbol -Objekt verwenden.

Weitere Einzelheiten finden Sie in meiner Antwort zu dieser Frage .

5
Nick F

Ich hatte ein sehr ähnliches Problem mit einem Projekt, aber ich befand mich in einer Situation, in der ich das Javascript GM nicht bearbeiten konnte.

Hier ist ein CSS-Ansatz, den ich teilen möchte:

#someGoogleMapsWrapperHere .gm-style img[src$='.svg'] {
    width: 48px !important;
    height: 48px !important;
}

Dies wählt nur img Elemente aus, die einen src Attributwert haben, der endet mit '. Svg' in Ihrem GM Integration und zwingt sie, width und height von 48px zu verwenden.

Normalerweise versuche ich, diese ! Wichtigen Tags zu vermeiden - aber in diesem Fall war dies obligatorisch, da einige Inline-Stile, die eine Breite und Höhe definieren, außer Kraft gesetzt werden müssen von 0px in IE11.

3
Dirk

Ich hatte das gleiche Problem, weil mein ActiveX-Filter geprüft wurde. Deaktivieren Sie das Kontrollkästchen (Eigenschaften - Sicherheit - ActiveX-Filter). Anschließend können Sie Ihre Markierungen wieder sehen. Der Fehler ist aufgetreten, da ich geoxml3 verwende.

1
JSqueen

Ich bin mir nicht sicher, ob das helfen würde:

Es ist ratsam, auch width des Kartenbereichs zu definieren. Zum Beispiel:

#map-canvas { height: 100%; width: 100%; }

IE10 war der einzige, der sich darüber beklagte, dass es am Anfang keine folgende Zeile gibt

<!DOCTYPE html>

Ein Kommentar: Die Markierung ist sehr groß und behält beim Herauszoomen dieselbe Größe.

Hat nicht geholfen Laufender Code (mit DOCTYPE-Zeile) bei BrowserStack Ich habe eine Meldung in der Konsole erhalten:

InvalidStateError (line 39)

Und diese Zeile stammt nicht aus dem Skript, denn wenn ich etwas ändere/lösche, ist die Nachricht gleich.

1
Anto Jurković

Sie sagen, sie hätten es hier behoben: https://connect.Microsoft.com/IE/feedback/details/793569/ie-11-does-not-display-google-map-markers ... Ich habe es gerade überprüft auf meinem 8.1-Rechner und es funktioniert nicht. 

Ich habe es noch nicht getestet, aber vielleicht hat dieser Kerl es herausgefunden: http://powerhut.co.uk/googlemaps/custom_markers.php

1
Eyal

scaledSize + optimized: false hat den Trick gemacht.

Die skalierte Größe muss tatsächliche Größe des verwendeten image/icon Sprite sein.

0
viviansteller