自定义SVG标记将不会显示在IE 11
我试图显示一些公交路线使用谷歌数据层,然后添加一些自定义图标标记。在Chrome和Firefox中运行良好,但在IE 11中,我只获取路线。我得到一个InvalidStateError深处的一些混淆代码。自定义SVG标记将不会显示在IE 11
标记使用带有一些内联SVG的数据uri,该内联SVG被转换为基本64字符串。我也试过不转换到基地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;
}
在MDN(Mozilla开发者网络)This reference指出, “Internet Explorer 8和上述只支持在CSS,和图像数据URI”。我想这只是在IE不支持。还有什么是新的?
不,这是在IE11的谷歌地图definetely工作。 – 2016-11-15 19:00:07
再一次,这实际上工作。请参阅@ morio对David Burton的回答的评论;关键是在那里同时具有“scaledSize”和“优化:false”。 – 2018-01-31 02:28:22
我有类似的问题,最终发现可以获得SVG和数据URI SVG图像,但是SVG需要一些其他图像类型不需要的参数。 具体来说,一旦我在图标的定义(以及uri,原点和锚值)上定义了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({
position: feature.position,
icon: bubbleImage,
map: window.map,
optimized: false,
zIndex: 1
});
OK!我在我的web中完成了这个工作,我在我的angularJS项目中使用了它,我使用Jquery分享它。我尝试了两种方法来创建自定义Google地图标记,这个运行代码使用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>
我有同样的问题。我使用常规svgs作为地图标记并获得相同的错误。有任何想法吗? – obiwahn 2015-02-04 17:06:05