Google Maps SVG图标标记图标未显示在IE11中 [英] Google Maps SVG image marker icons not showing in IE11

问题描述

我有两个集合，一个网站上有一个问题，因为某些原因，SVG图像标记没有在IE 11中显示。的标记：

• 默认缩小有郊区的PNG标记


• 放大地址特定编号的SVG一个

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

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

• 原因




• 是否这是IE11 Edge模式（将文档模式切换到10以使其正常工作）的东西。




• 或与Google失败的内容。 p>

该网站是：

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

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

解决方案

似乎Google Maps目前并不真正支持使用SVG图片进行标记。这个事实很容易忽视，因为事实证明，SVG标记图像实际上可以工作，例如。 Chrome和Opera。

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

示例（来自Google Maps文档， 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，
比例：1，
 strokeColor：'gold'，
 strokeWeight：14 
}; 
 
 var marker = new google.maps.Marker（{
 position：map.getCenter（），
图标：goldStar，
地图：map 
 }）; 
  

（感谢这个答案）

There is an issue on a site I have been working on that for some reason the SVG image markers are not showing up in IE 11.

I have two sets of markers:

• the default zoomed out has PNG markers for the suburbs
• zoomed in has address specific numbered SVG ones

I use a fallback for older browsers that don't support SVG (testing it with modernizr). I am using the old Google Chart markers for IE 11 to get it to work (testing the user agent string to id it).

I want to know if anyone has an idea as to:

• the cause

• whether it is something screwed up with IE11 Edge mode (switch the document mode to 10 to get it to work)

• or something that is failing with Google.

The site is:

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

You can see it fail if you change the user agent string in IE 11 while leaving it in Edge Document mode.

解决方案

It seems that Google Maps doesn't really support using SVG images for markers at the moment. This fact is easy to overlook, because it turns out that SVG marker images do actually work in, eg. Chrome and Opera.

However, the Google Maps API (v3) specifically provides Symbol objects for displaying vector paths in map markers. I found that specifying the vector image in SVG path notation allowed it to work in IE and other browsers.

Example (from Google Maps docs, 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
});

(Thanks to this answer too)

这篇关于Google Maps SVG图标标记图标未显示在IE11中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！