debugging - Google Maps SVG 图像标记图标未在 IE11 中显示

Question

在我一直在处理的一个网站上存在一个问题，由于某种原因，SVG 图像标记没有出现在 IE 11 中。

我有两组标记:

默认缩小有郊区的PNG标记

放大后有地址特定编号的 SVG

我对不支持 SVG 的旧浏览器使用后备(使用modernizr 测试它)。我正在使用 IE 11 的旧 Google 图表标记来使其工作(测试用户代理字符串以识别它)。

我想知道是否有人有以下想法:

原因

是否是 IE11 Edge 模式搞砸了(将文档模式切换到 10 以使其工作)

或谷歌失败的东西。

该网站是:

http://artstrail.org.au/arts-trail.php

如果您在 IE 11 中更改用户代理字符串，同时将其置于边缘文档模式，您会看到它失败。

Answer 1

谷歌地图目前似乎并不真正支持使用 SVG 图像作为标记。这个事实很容易被忽视，因为事实证明 SVG 标记图像确实有效，例如。 Chrome 和歌剧。

但是，Google Maps API (v3) 专门提供了 Symbol用于在 map 标记中显示矢量路径的对象。我发现在 SVG path notation 中指定矢量图像允许它在 IE 和其他浏览器中工作。

示例(来自 Google map 文档，here):

var goldStar = {
  path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
  fillColor: 'yellow',
  fillOpacity: 0.8,
  scale: 1,
  strokeColor: 'gold',
  strokeWeight: 14
};

var marker = new google.maps.Marker({
  position: map.getCenter(),
  icon: goldStar,
  map: map
});

(也感谢 this answer)