自定義SVG標記將不會顯示在IE 11

Question

我試圖顯示一些公交路線使用谷歌數據層，然後添加一些自定義圖標標記。在Chrome和Firefox中運行良好，但在IE 11中，我只獲取路線。我得到一個InvalidStateError深處的一些混淆代碼。

標記使用帶有一些內聯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; 
    } 

Answer 1

在MDN（Mozilla開發者網絡）This reference指出， 「Internet Explorer 8和上述只支持在CSS，和圖像數據URI」。我想這只是在IE不支持。還有什麼是新的？

Answer 2

我有類似的問題，最終發現可以獲得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 
      }); 

Answer 3

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>