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

Question

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

我有两套标记：

• 默认缩小具有郊区的PNG标记
• 放大的地址具有特定编号的SVG地址

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

我想知道是否有人有任何想法：

• 原因

• 是否与IE11 Edge模式搞混了（将文档模式切换为10以使其工作）

• 或谷歌失败的东西。

该网站是：

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

如果在IE 11中更改用户代理字符串而将其保留为边缘文档模式，则可以看到它失败。

Answer 1

目前看来Google Maps并不支持将SVG图像用于标记。 这个事实很容易被忽视，因为事实证明SVG标记图像实际上可以工作，例如。 Chrome和Opera。

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

示例（来自Google Maps文档， 此处 ）：

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

（也感谢这个答案 ）

Answer 2

实际上，对我来说，添加标记optimized: false和图标scaledSize: new google.maps.Size(25, 25)为我做了。 因此，即使Nick F所说的是真的（它没有得到官方的支持），它也能起作用。

SVG标记开始在IE11中显示。 似乎scaledSize在<img>元素上添加了样式width和height ，不确定在这种情况下optimized是什么。

例：

        var marker = new google.maps.Marker({
            map: map,
            position: poi.geometry.location,
            title: poi.name,
            zIndex: 99,
            optimized: false,
            icon: {
                url: 'loremipsum.svg',
                scaledSize: new google.maps.Size(25, 25),
                size: new google.maps.Size(25, 25),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(12.5, 12.5)
            }
        });

Credit： Google地图SVG标记不会显示在IE 11上

Answer 3

IE实现在以下方面偏离了SVG标准：

标记元素的属性在引用点继承，而不是从标记元素的祖先继承。

参考

MS-SVG：'标记'元素

Answer 4

如果SVG支持较低的IE版本，则添加meta以模拟IE10 / IE9。

ie）for IE-10 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">