在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增添了风格width，并height在上<img>元，不知道是什么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)
            }
        });

信用：Google Maps SVG 标记不显示在 IE 11 上