internet-explorer - 自定义 SVG 标记不会在 IE 11 中显示

Question

我尝试使用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;
  }

Answer 1

我遇到了类似的问题，最终发现您可以使 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
          });