internet-explorer - versiones - ventajas y desventajas de internet explorer

Los marcadores SVG personalizados no se mostrarán en IE 11

Question

Estoy tratando de mostrar algunas rutas de autobús usando la capa de datos de Google y luego agregar algunos marcadores de iconos personalizados. Funciona muy bien en Chrome y Firefox, pero en IE 11 solo obtengo las rutas. Obtengo un InvalidStateError en algún lugar profundo en algún código ofuscado.

los marcadores utilizan un uri de datos con algunos SVG en línea que se convierten a 64 cadenas de base. También he intentado NO convertir a base 64; eso no genera ningún error aparente, pero los marcadores aún no se muestran.

El javascript simplificado se pega a continuación, y puede verlo en acción en jsfiddle .

    var map;

    map = new google.maps.Map(document.getElementById(''map-canvas''), {
      zoom: 11,
      center: {lat: 38.813605, lng: -89.957399}
    });

    var geoJsonRoutesUrl = ''https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Routes.json'';

    var routesLayer = new google.maps.Data(); 
    routesLayer.loadGeoJson(geoJsonRoutesUrl);
    routesLayer.setMap(map);  
    routesLayer.setStyle(function(feature) {
      return ({
        strokeColor: feature.getProperty(''color''),
      fillColor: feature.getProperty(''color''),
        strokeWeight: 6
      });
    });

    var geoJsonRouteMarkersUrl = ''https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Route-Markers.json'';
    var routeMarkersLayer = new google.maps.Data(); 
    routeMarkersLayer.loadGeoJson(geoJsonRouteMarkersUrl);
    routeMarkersLayer.setMap(map);
    routeMarkersLayer.setStyle(function(feature) {
    var markerIcon = CreateRouteMarkersIconDefinition(
        feature.getProperty(''route''),
        feature.getProperty(''color''),
        feature.getProperty(''backColor''));
      return ({icon: markerIcon});
    });


  function CreateRouteMarkersIconDefinition(route, color, backColor) {
    var svgHtml = ''<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30">'';
    svgHtml += ''<ellipse cx="15" cy="15" r="15" rx="15" ry="10" fill="'' +  backColor + ''" />'';
    svgHtml += ''<text x="15" y="20" style="text-anchor: middle;" font-family="Verdana" font-size="12px" font-weight = "bold" fill="'' + color + ''" >'' + route + ''</text>'';
    svgHtml += ''</svg>'';
    var svgIcon = {
      url: ''data:image/svg+xml;charset=UTF-8;base64,'' + btoa(svgHtml),
      anchor: new google.maps.Point(15, 15)
    };

    return svgIcon;
  }

Answer 1

¡DE ACUERDO! Hice esto en mi web, lo usé en mi proyecto angularJS, lo comparto con Jquery. Intento dos formas de crear el marcador de mapa de Google personalizado, este código de ejecución utiliza canvg.js es la mejor compatibilidad para el navegador. El Código comentado no es compatible con IE11 en la actualidad ("scaledSize" y "optimized: false" juntos parece que difícil).

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById(''map''), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener(''click'', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: ''poly''
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    ''<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'' +
    ''<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'' +
    ''<circle style="fill:'' + color + '';" cx="16" cy="16" r="11"/>'' +
    ''<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">'' + text + ''</text>'' +
    ''</svg>''
  );
  div.append(svg);

  var dd = $("<canvas height=''50px'' width=''50px''></cancas>");

  var svgHtml = div[0].innerHTML;

  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = ''<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">''
  //    + ''<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>''
  //    + ''<circle style="fill:'' + color + '';" cx="16" cy="16" r="11"/>''
  //    + ''<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">'' + text + ''</text>''
  //    + ''</svg>'';
  //var imgSrc = ''data:image/svg+xml;charset=UTF-8,'' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

Answer 2

Tuve un problema similar y, finalmente, descubrí que puedes obtener imágenes SVG y URI SVG de datos en funcionamiento, pero algunos parámetros que no son necesarios para otros tipos de imagen son necesarios para SVG. Específicamente, una vez que dimensiono y escalamos los parámetros de tamaño en la definición del icono (junto con los valores de uri, origen y ancla), el error desapareció y el marcador se procesó. Mi marcador de muestra es el siguiente (con svg ya definido como el SVG que quiero como marcador):

var bubbleImage = {
              url: ''data:image/svg+xml;base64,'' + Base64.encode(svg),
              size: new google.maps.Size(192, 21),
              scaledSize: new google.maps.Size(192,21),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(88, 53)
          };
          var bubbleMarker = new google.maps.Marker({
              position: feature.position,
              icon: bubbleImage,
              map: window.map,
              optimized: false,
              zIndex: 1
          });

Answer 3

Esta referencia en MDN (Mozilla Developer Network) indica que "Internet Explorer 8 y versiones posteriores solo admiten URI de datos para imágenes en CSS, y". Supongo que esto simplemente no es compatible con IE. ¿Qué más hay de nuevo?