自定义SVG标记不会在IE 11中显示 [英] Custom SVG markers won't display in IE 11

问题描述

我尝试使用 Google数据图层 显示一些公交路线，然后添加一些自定义图标标记。在Chrome和Firefox中运行良好，但在IE 11中，我只获取路线。我在一些混淆的代码中深处发现了一个 InvalidStateError 。

这些标记使用带有内联SVG的数据uri即转换为基本64字符串。我也试过不转换到基地64;这不会产生任何明显的错误，但标记仍然不显示。

简化的javascript粘贴在下面，您可以在 jsfiddle 。

  var map; 
 $ b $ 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}）; 
}）; 
 
 
函数CreateRouteMarkersIconDefinition（route，color，backColor）{
 var svgHtml ='< svg xmlns =http://www.w3.org/2000/svg xmlns：svg =http://www.w3.org/2000/svgwidth =30height =30>'; 
 svgHtml + ='< ellipse cx =15cy =15r =15rx =15ry =10fill =''+ backColor +'/>'; 
 svgHtml + ='< text x =15y =20style =text-anchor：middle; font-family =Verdanafont-size =12pxfont-weight =boldfill ='+ 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; 
} 
  

解决方案

并最终发现可以获得SVG和数据URI SVG图像的工作方式，但SVG需要一些其他图像类型不需要的参数。
具体来说，一旦我在图标的定义（以及uri，origin和anchor值）上设置了size和scaledSize参数，错误就消失了，并且渲染了标记。
我的示例标记如下所示（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（{
位置：feature.position，
图标：bubbleImage，
 map：window.map，
优化：false ，
 zIndex：1 
}）; 
  

I'm trying to display some bus routes using Google Data Layer, and then add some custom icon markers. Works great in Chrome and Firefox, but in IE 11 I only get the routes. I get an InvalidStateError somewhere deep in some obfuscated code.

the markers use a data uri with some inline SVG that is converted to base 64 strings. I've also tried NOT converting to base 64; that doesn't generate any apparent errors, but the markers still don't display.

Simplified javascript is pasted below, and you can see it in action at 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;
  }

解决方案

I had a similar problem, and eventually found that you can get SVG and data URI SVG images working, but some parameters that aren't required for other image types are required for SVG. Specifically, once I size and scaledSize parameters on the definition for the icon (along with uri, origin and anchor values), the error went away and the marker rendered. My sample marker is as follows (with svg having already been defined to be the SVG I want as the marker):

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

这篇关于自定义SVG标记不会在IE 11中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！