Google地图SVG标记不会显示在IE 11上 [英] Google Maps SVG marker doesn't display on IE 11

查看：104
本文介绍了Google地图SVG标记不会显示在IE 11上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的SVG地图标记在IE11上消失了。它在Chrome，Firefox，Safari，IE9& 10，但不是11.我已经上传了我当前代码的JSfiddle。我无法判断这是我还是Google Maps的一个错误。



我已经上传了我当前代码的JSfiddle 

 < 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％;保证金：0; padding：0} 
＃map-canvas {height：100％} 
< / style> 
< script> 
 
函数initialize（）{
 
 var sanfrancisco = new google.maps.LatLng（37.78062，-122.397203）; 
 
 var mapOptions = {
 zoom：18，
 zIndex：0，
 center：sanfrancisco，
 mapTypeControl：true，$ b $ 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 
}）; 
 $ b $ 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} 
] 
}，{
feat ureType：poi，
elementType：labels.icon，
stylers：[
 {invert_lightness：true}，
 {hue ：＃0077ff} 
] 
}，{
featureType：poi，
elementType：labels.text，
stylers ：[
 {visibility：off} 
] 
}，{
featureType：poi，
elementType：标签，
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} 
] 
 $ bfeatureType：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>


解决方案

添加 scaledSize 到图像/图标和优化：false 到标记为我解决。



< a href =http://jsfiddle.net/kQRbr/31/> 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上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆