![stylers]( "stylers")
本文介绍了Google地图SVG标记不会显示在IE 11上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我的SVG地图标记在IE11上消失了。它在Chrome，Firefox，Safari，IE9& 10，但不是11.我已经上传了我当前代码的JSfiddle。我无法判断这是我还是Google Maps的一个错误。 我已经上传了我当前代码的JSfiddle 添加 scaledSize 到图像/图标和优化：false 到标记为我解决。 http://jsfiddle.net/kQRbr/31/ var image = { url：'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-marker.svg'， scaledSize：new google.maps.Size（100，100），} var marker = new google.maps.Marker（{ position：sanfrancisco， map：map，优化：false，图标：图片}）; My SVG map marker disappears on IE11. It's visible in Chrome, Firefox, Safari, IE9 & 10, but not 11. I've uploaded a JSfiddle of my current code. I can't tell if this is me or a bug with Google Maps.I've uploaded a JSfiddle of my current code<html> <head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyfFUUVxVyoCicnttJfj-w63wzfbTKV3Y&sensor=false"> </script> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script>function initialize() { var sanfrancisco = new google.maps.LatLng(37.78062,-122.397203); var mapOptions = { zoom: 18, zIndex:0, center: sanfrancisco, mapTypeControl: true, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas'] },zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // var image = 'img/1p_marker3.png'; var image = 'http://firstperson.is/assets/img/contact/map_marker.svg';var marker = new google.maps.Marker({ position: sanfrancisco, map: map, icon: image }); var roadAtlasStyles = [ { "featureType": "poi", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] },{ "featureType": "landscape", "elementType": "geometry.fill", "stylers": [ { "color": "#003a70" } ] },{ "featureType": "landscape", "elementType": "geometry.stroke", "stylers": [ { "color": "#0075c9" } ] },{ "featureType": "administrative.land_parcel", "stylers": [ { "visibility": "off" } ] },{ "elementType": "labels.text.fill", "stylers": [ { "color": "#ffffff" } ] },{ "elementType": "labels.text.stroke", "stylers": [ { "visibility": "off" } ] },{ "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#0075c9" } ] },{ "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#ffffff" } ] },{ "featureType": "road.local", "elementType": "geometry", "stylers": [ { "color": "#0075c9" } ] },{ "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#d0343a" } ] },{ "featureType": "road.highway.controlled_access", "elementType": "geometry", "stylers": [ { "color": "#ff4539" } ] },{ "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#0075c9" } ] },{ "featureType": "transit", "elementType": "labels.text.fill", "stylers": [ { "color": "#ffffff" } ] },{ "featureType": "poi", "elementType": "labels.icon", "stylers": [ { "invert_lightness": true }, { "hue": "#0077ff" } ] },{ "featureType": "poi", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] },{ "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" }, {"color":"#ffffff"} ] },{ "featureType": "poi.park", "elementType": "labels.icon", "stylers": [ { "visibility": "on" } ] },{ "featureType": "poi.sports_complex", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" }, {"color":"#ffffff"} ] },{ "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#ffffff" } ] },{ "featureType": "administrative.neighborhood", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.province", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "weight": 0.9 } ] } ]; var styledMapOptions = { name: 'US Road Atlas' }; var usRoadMapType = new google.maps.StyledMapType( roadAtlasStyles, styledMapOptions); map.mapTypes.set('usroadatlas', usRoadMapType); map.setMapTypeId('usroadatlas'); // var transitLayer = new google.maps.TransitLayer(); // transitLayer.setMap(map);};google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body></html> 解决方案 Adding scaledSize to the image/icon and optimized: false to the marker solved it for me.http://jsfiddle.net/kQRbr/31/var image = { url: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-marker.svg', scaledSize: new google.maps.Size(100, 100),}var marker = new google.maps.Marker({ position: sanfrancisco, map: map, optimized: false, icon: image}); 这篇关于Google地图SVG标记不会显示在IE 11上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 07-15 11:33