自定义 SVG 标记不会在 IE 11 中显示答案

【问题标题】：Custom SVG markers won't display in IE 11自定义 SVG 标记不会在 IE 11 中显示
【发布时间】：2015-01-31 09:41:12
【问题描述】：

我正在尝试使用 Google 数据层 显示一些公交路线，然后添加一些自定义图标标记。在 Chrome 和 Firefox 中效果很好，但在 IE 11 中我只能得到路由。我在一些混淆代码的深处得到了一个 InvalidStateError。

标记使用带有一些内联 SVG 的数据 uri，这些 SVG 被转换为 base 64 字符串。我也尝试过不转换为base 64；这不会产生任何明显的错误，但标记仍然不显示。

下面粘贴了简化的 javascript，您可以在 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;
  }

【问题讨论】：

我也有同样的问题。我使用常规 svgs 作为地图标记并得到相同的错误。有什么想法吗？

标签： internet-explorer google-maps-api-3 svg google-maps-markers

【解决方案1】：

This reference 在 MDN（Mozilla 开发者网络）中声明“Internet Explorer 8 及更高版本仅支持 CSS、和”中图像的数据 URI。我猜这在 IE 中是不支持的。还有什么新东西？

【讨论】：

不，这绝对适用于谷歌地图的 IE11。
再一次，这确实有效。请参阅@morio 对 David Burton 的回答的评论；关键是要有“scaledSize”和“optimized: false”。

【解决方案2】：

我遇到了类似的问题，最终发现您可以让 SVG 和数据 URI SVG 图像正常工作，但是 SVG 需要一些其他图像类型不需要的参数。具体来说，一旦我在图标的定义上设置了 size 和 scaledSize 参数（连同 uri、origin 和 anchor 值），错误就会消失并呈现标记。我的示例标记如下（已将 svg 定义为我想要作为标记的 SVG）：

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

【讨论】：

"scaledSize" 和 "optimized: false" 一起看起来很棘手。
在将 IE11 和 svg 图像作为文件（普通 url ，而不是 dataURIs）时遇到了这个问题，因此它不是特定于数据 URIs。 @Morio 是正确的，这两个所需的位似乎是 scaledSize 和优化的。我不需要原点、锚点和大小。
我可以验证这修复了我在 win8 上的 IE11 上遇到的 SVG 错误：InvalidStateError。特别是在图标哈希上设置 scaledSize 并在传递给 Marker 构造函数的哈希上优化：false。
这部分有效。 addListener mouseover/mouseouts 更改/更改标记会在 IE 11 上导致错误-- XML5602: Unexpected end of input。行：1，第 1041 列。在 Chrome 上它工作得很好。
@MikeKormendy 确定它不是对象文字中的尾随逗号吗？

【解决方案3】：

好的！我在我的网络中完成了这个，我在我的 angularJS 项目中使用了它，我使用 Jquery 分享它。我尝试了两种方法来创建自定义谷歌地图标记，这个运行代码使用 canvg.js 是浏览器的最佳兼容性。注释掉的代码不支持 IE11 urrently("scaledSize" 和 "optimized: false" 似乎一起做了棘手）。

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>

【讨论】：