Google Maps SVG 标记不显示在 IE 11 上答案

【问题标题】：Google Maps SVG marker doesn't display on IE 11Google Maps SVG 标记不显示在 IE 11 上
【发布时间】：2023-03-03 07:03:18
【问题描述】：

我的 SVG 地图标记在 IE11 上消失了。它在 Chrome、Firefox、Safari、IE9 和 10 中可见，但在 11 中不可见。我已经上传了我当前代码的 JSfiddle。我不知道这是我的问题还是 Google 地图的错误。

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>

【问题讨论】：

您的服务器正在返回内容类型为“text/html”的 .svg 文件。这是故意的吗？ Chrome 未显示您的图标。
我不再托管 svg 图像文件。我选择了 png，因为 Google 地图似乎不支持标记图像的 SVG。
我在这里测试了一个可行的解决方案：stackoverflow.com/questions/27261346/…

标签： javascript google-maps google-maps-api-3 svg

【解决方案1】：

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

所以，我想分享一个 CSS 方法：

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

这只选择 img 元素，其 src 属性值以 '.svg' 结尾您的 GM 集成并强制他们使用 48px 的 width 和 height。

我通常会尽量避免使用那些 !important 标记 - 但在这种情况下它是强制性的，因为它必须推翻一些在 IE11 中定义宽度和高度为 0px 的内联样式。

【讨论】：

【解决方案2】：

将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
});

【讨论】：

太棒了，对我来说这 2 个设置在 IE11 中就像一个魅力
@Johan B 有没有像您发现的任何文档一样，或者它是标准的 IE 错误解决程序（只是赌博和纯粹的运气以及通过更改随机属性）？
对我们来说，只要 SVG 在文件本身中具有正确的默认大小，只需将优化设置为 false 即可。
像魅力一样工作！
谢谢 - 它也适用于我！我仍然不明白为什么这个基本功能还没有被 MS 修复。好难过。

【解决方案3】：

Google 地图目前似乎不支持将 SVG 用于标记图像。不过，您可以使用Symbol 对象来创建矢量标记图标。

更多详情请见my answer至this question。

【讨论】：

@MikeKormendy 首先，我在 2014 年 10 月写这篇文章时确实如此。其次（请参阅上面链接的我的答案），虽然 SVG 标记确实在某些浏览器中发生工作，但它们并没有得到官方支持，也不能在所有浏览器中工作 - 你必须使用符号作为矢量适用于所有浏览器的图标。我在文档中看不到任何内容表明已更改，但如果您确定 Google 地图现在确实支持 SVG 标记（包括在 IE11 中？），那么支持该标记并提供上述更新的链接将比简单的断言。 “Downvote”也显得很粗鲁。
这里没有个性，也不会争论。只是说明我为什么投反对票 - 这最终可以帮助用户根据投票数查看哪些答案是相关的（或在这种情况下不相关）。我已经提供了一个指向 OPs cmets 中示例的链接，我没有在这个线程中从那里复制答案，而是简单地提供了 cmets 中的链接（这是关于 SO 的政策）

【解决方案4】：

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

【讨论】：

我在 VM 环境中进行测试。我不想依赖具有停用设置的用户来使其正常工作。

【解决方案5】：

我不确定这是否会有所帮助：

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

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

IE10是唯一一个抱怨开头没有以下行

<!DOCTYPE html>

一条评论：标记很大，缩小时保持不变。

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

InvalidStateError (line 39)

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

【讨论】：

谢谢。我重置了宽度，因为这是一个好习惯。 doctype 存在于 jsfiddle 上，我只是偶然没有抓住它来粘贴代码。奇怪的是，除了 IE 11 上的地图标记外，所有东西在视觉上都可以正常工作。我知道支持 SVG，但我不确定它是否是我从 Adobe Illustrator 保存的 SVG 图像文件中的设置，或者它是否是一个错误.
看来 SVG 图片没问题。您可以将图像的 SVG 代码放在单独的 html 文件中，它可以毫无问题地呈现。我不知道这个 SVG 图像的尺寸是否有问题。
我将 SVG 换成 png 以确保它是未被读取的 SVG，并且现在该图标在我测试过的情况下可见。我没有更改任何其他代码。