谷歌地图SVG标记在IE 11上不显示

我的SVG映射标记在IE11上消失。它在Chrome、Firefox、Safari、IE9&10，但不是11。我已经上传了我当前代码的JSfiddle。我不知道这是我还是谷歌地图的bug。

我已经上传了我当前代码的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%; 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>

将scaledSize添加到图像/图标，将optimized: 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,
    optimized: false,
    icon: image
});

谷歌地图目前似乎不支持对标记图像使用SVG。不过，通过使用Symbol对象，可以使用矢量标记图标。

有关更多详细信息，请参阅我对此问题的回答。

我在一个项目中遇到了一个非常类似的问题，但我无法编辑GM javascript。

因此，我想分享一种CSS方法：

#someGoogleMapsWrapperHere .gm-style img[src$='.svg'] {
    width: 48px !important;
    height: 48px !important;
}

这仅选择GM集成中具有src属性值且以'.svg'结尾的img元素，并强制它们使用48px的宽度和高度。

我通常会尽量避开那些！重要的标记-但在这种情况下，这是强制性的，因为它必须否决一些在IE11中定义宽度和高度为0px的内联样式。

我不确定这是否有帮助：

同时定义地图区域的width是明智的。例如：

#map-canvas { height: 100%; width: 100%; }

IE10是唯一一个抱怨开始时没有以下行的人

<!DOCTYPE html>

一条评论：当你缩小时，标记是巨大的，保持相同的大小。

没有帮助。在BrowserStack上运行代码（使用DOCTYPE行）我在控制台中收到消息：

InvalidStateError (line 39)

这一行不是来自脚本，因为如果我更改/删除某些内容，消息是相同的。

我遇到了同样的问题，因为我的ActiveX过滤器被检查了。取消选中（属性-安全-activeX过滤器），然后您可以再次看到您的标记。出现错误是因为我正在使用geoxml3。

相关内容

最新更新

热门标签：