कस्टम एसवीजी मार्करों IE 11 में

Question

मैं गूगल डेटा स्तर का उपयोग कर कुछ बस मार्गों प्रदर्शित करने के लिए कोशिश कर रहा हूँ प्रदर्शित नहीं करेगा, और फिर कुछ कस्टम आइकन मार्कर जोड़ें। क्रोम और फ़ायरफ़ॉक्स में बहुत अच्छा काम करता है, लेकिन आईई 11 में मुझे केवल मार्ग मिलते हैं। मुझे अमान्यस्टेट त्रुटि कुछ obfuscated कोड में कहीं गहराई मिलती है।

मार्कर कुछ इनलाइन एसवीजी के साथ डेटा यूरी का उपयोग करते हैं जो बेस 64 स्ट्रिंग में परिवर्तित हो जाता है। मैंने बेस 64 में कनवर्ट करने की कोशिश भी नहीं की है; जो किसी भी स्पष्ट त्रुटियों को उत्पन्न नहीं करता है, लेकिन मार्कर अभी भी प्रदर्शित नहीं होते हैं।

सरलीकृत जावास्क्रिप्ट नीचे चिपकाया गया है, और आप इसे 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 (मोज़िला डेवलपर नेटवर्क) में This reference कहा गया है कि "इंटरनेट एक्सप्लोरर 8 और केवल उपरोक्त CSS में, है, और छवियों के लिए डेटा यूआरआई का समर्थन करता है"। मुझे लगता है कि यह आईई में समर्थित नहीं है। और क्या नया है?

Answer 2

मुझे एक ही समस्या थी, और अंत में पाया गया कि आप एसवीजी और डेटा यूआरआई एसवीजी छवियों को काम कर सकते हैं, लेकिन कुछ पैरामीटर जो एसवीजी के लिए अन्य छवि प्रकारों के लिए आवश्यक नहीं हैं। विशेष रूप से, एक बार जब मैं आकार और स्केल करता हूं आइकन के लिए परिभाषा (यूरी, मूल और एंकर मूल्यों के साथ) पर पैरामीटर आकार बदलें, त्रुटि दूर हो गई और मार्कर प्रदान किया गया। मेरे नमूना मार्कर (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

ठीक है! मैंने इसे अपने वेब में किया, मैंने इसे अपने कोणीय जेएस प्रोजेक्ट में इस्तेमाल किया, मैं इसे jquery का उपयोग करता हूं। मैं कस्टम Google मानचित्र मार्कर बनाने के दो तरीकों का प्रयास करता हूं, यह रन कोड उपयोग canvg.js ब्राउज़र के लिए सबसे अच्छी संगतता है। टिप्पणी-आउट कोड IE11 का समर्थन नहीं करता है ("स्केल किए गए आकार" और "अनुकूलित: झूठी" एक साथ ऐसा लगता है मुश्किल)।

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>