Question

我希望有人能够帮助我：

我的情况：

我目前正在使用谷歌地图，我做了一些标记代表旅行。现在，这些标记的图标可以很容易地更改为您选择的图像并定义如下：

var marker = new google.maps.Marker({
    label: name[0],
    title: name,
    draggable: true,
    position: { lat: lat, lng: lng },
    icon: this._imgNormal,
    map: _map,
    customInfo: nearHotel.ID,
    descr: nearHotel.descr
});

但现在我需要将这些图标交换为SVG而不是PNG。

我尝试了什么

首先，我将解释我没有使用这种简单方法然后在标记中使用它的原因：

var icon = {
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

因为我想最终制作更复杂的SVG，据我所知，这种方法不允许我在几个矩形内部制作一朵花。

我做了一些研究，并在本网站上找到了一种方法：
Create Google Maps Markers with Inline SVG

我的问题和疑问

在Chrome和Firefox中这可行，但不是在IE中...我开始查找为什么它不起作用，它说它必须对encodeURIComponent用户做一些事情，这在IE中不会以相同的方式工作这可能就是为什么不支持它。

有没有人知道是否有办法让这个方法在IE中运行？或者是否有一种完全不同的方式来使用可在任何浏览器上运行的复杂SVG？

我很高兴听到您的回答，我提前感谢您

我在Illustrator中创建的SVG示例

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="85.04px" height="85.04px" viewBox="0 0 85.04 85.04" enable-background="new 0 0 85.04 85.04" xml:space="preserve">
<g>
	<g>
		<circle fill="#706F6F" cx="42.466" cy="42.143" r="20.582"/>
	</g>
	<g>
		<g>
			<circle fill="#FFFFFF" cx="42.466" cy="42.143" r="18.5"/>
		</g>
		<circle fill="#CE1222" cx="42.466" cy="42.143" r="13.5"/>
	</g>
</g>
</svg>

＆＃13;

Answer 1

我在SVG文件上尝试了你的代码，它在Chrome和IE上也适用于我，无论如何我在IE上遇到了SVG的一些问题，我意识到我必须用pixles分配宽度和高度。

例如你写道：

width="35"
height="35"

但对于IE，你必须这样写：

width="35px"
height="35px"

这是基于我对SVG的了解以及在IE中使用它们，希望它有所帮助：）

SVG作为标记的图标不在IE中工作

1 个答案: