如何在 Google Maps API v3 中使用 SVG 标记
我可以使用转换后的 image.svg 作为谷歌地图图标吗？我正在将我的 png 图像转换为 svg，我想使用它，比如可以旋转的谷歌地图符号。我已经尝试使用谷歌地图符号，但我想要一个像汽车、人等的图标......这就是为什么我将我的一些 png 文件转换为 svg，就像这个示例网站一样，他对这些 http://www.goprotravelling.com/ 使用了什么
您可以使用 SVG Path notation 呈现您的图标。
有关详细信息，请参阅 Google documentation。
这是一个基本示例：
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
}
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: false,
icon: icon
});
这是一个关于如何显示和缩放标记 SVG 图标的工作示例：
编辑：
另一个带有复杂图标的示例：
编辑2：
以下是如何将 SVG 文件作为图标：
如果您不仅需要完整的 svg 路径，而且希望它可以在客户端进行修改（例如更改文本、隐藏详细信息等），您可以使用包含 svg 的替代数据“URL”：
var svg = '<svg width="400" height="110"><rect width="300" height="100" /></svg>';
icon.url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg);
JavaScript (Firefox) btoa() 用于从 SVG 文本中获取 base64 编码。您还可以使用 http://dopiaza.org/tools/datauri/index.php 生成基本数据 URL。
这是一个完整的示例 jsfiddle：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var template = [
'<?xml version="1.0"?>',
'<svg width="26px" height="26px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
'<circle stroke="#222" fill="{{ color }}" cx="50" cy="50" r="35"/>',
'</svg>'
].join('\n');
var svg = template.replace('{{ color }}', '#800');
var docMarker = new google.maps.Marker({
position: new google.maps.LatLng(-33.92, 151.25),
map: map,
title: 'Dynamic SVG Marker',
icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg), scaledSize: new google.maps.Size(20, 20) },
optimized: false
});
var docMarker = new google.maps.Marker({
position: new google.maps.LatLng(-33.95, 151.25),
map: map,
title: 'Dynamic SVG Marker',
icon: { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg), scaledSize: new google.maps.Size(20, 20) },
optimized: false
});
</script>
</body>
</html>
可以在 here 中找到其他信息。
避免 base64 编码：
为了避免 base64 编码，您可以将 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg) 替换为 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg)
这应该适用于低至 IE9 的现代浏览器。优点是 encodeURIComponent 是默认的 js 函数，在所有现代浏览器中都可用。您可能还会获得较小的链接，但您需要对此进行测试并考虑在您的 svg 中使用 ' 而不是 "。
另请参阅 Optimizing SVGs in data URIs 了解更多信息。
IE 支持： 为了在 IE 中支持 SVG 标记，需要进行如下所述的两个小调整：SVG Markers in IE。我更新了示例代码以支持 IE。
data:image/svg+xml;utf8,。更多信息：css-tricks.com/probably-dont-base64-svg
# 这样的一些字符你是否使用了 URL 编码？
我知道这篇文章有点老了，但我在 SO 上看到了太多关于这方面的糟糕信息，以至于我可以尖叫。所以我只需要用我知道可行的完全不同的方法投入我的两分钱，因为我在许多地图上都可靠地使用它。除此之外，我相信 OP 还希望能够围绕地图点旋转箭头标记，这与围绕它自己的 x、y 轴旋转图标不同，这将改变箭头标记在地图上指向的位置。
首先，请记住我们正在使用 Google 地图和 SVG，因此我们必须适应 Google 为标记（或实际上是符号）部署其 SVG 实现的方式。 Google 将 SVG 标记图像的锚点设置为 0,0，这不是 SVG 视图框的左上角。为了解决这个问题，您必须以不同的方式绘制您的 SVG 图像，以便为 Google 提供所需的内容……是的，答案在于您在 SVG 编辑器（Illustrator、Inkscape 等）中实际创建 SVG 路径的方式。 .)。
第一步，是摆脱 viewBox。这可以通过将 XML 中的 viewBox 设置为 0 来完成……没错，只是一个 0，而不是 viewBox 通常的四个参数。这会关闭视图框（是的，这在语义上是正确的）。执行此操作时，您可能会立即注意到图像的大小跳跃，这是因为 svg 不再具有缩放图像的基础（视图框）。因此，我们通过将宽度和高度设置为您希望图像在 SVG 编辑器的 XML 编辑器中的实际像素数来直接创建该引用。
通过在 XML 编辑器中设置 svg 图像的宽度和高度，您可以创建用于缩放图像的基线，并且默认情况下，该大小变为标记缩放属性的值 1。您可以看到这对标记的动态缩放具有的优势。
现在您已经调整了图像大小，移动图像直到您希望作为锚点的图像部分超过 svg 编辑器的 0,0 坐标。完成此操作后，复制 svg 路径的 d 属性的值。您会注意到大约一半的数字是负数，这是将锚点对准图像的 0,0 而不是 viewBox 的结果。
然后，使用此技术可以让您在地图上的 lat 和 lng 点周围正确旋转标记。这是将 svg 标记上的点绑定到标记位置的纬度和经度的唯一可靠方法。
我尝试制作 a JSFiddle for this，但其中的实现存在一些错误，这是我不太喜欢重新解释代码的原因之一。因此，我在下面提供了一个完全独立的示例，您可以尝试、调整和用作参考。这与我在 JSFiddle 上尝试过的代码相同，但它失败了，但它在 Firebug 中航行时没有发出呜咽声。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Drew G. Stimson, Sr. ( Epiphany )" />
<title>Create Draggable and Rotatable SVG Marker</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<style type="text/css">
#document_body {
margin:0;
border: 0;
padding: 10px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
color: #f0f9f9;
text-align: center;
text-shadow: 1px 1px 1px #000;
background:#1f1f1f;
}
#map_canvas, #rotation_control {
margin: 1px;
border:1px solid #000;
background:#444;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#map_canvas {
width: 100%;
height: 360px;
}
#rotation_control {
width: auto;
padding:5px;
}
#rotation_value {
margin: 1px;
border:1px solid #999;
width: 60px;
padding:2px;
font-weight: bold;
color: #00cc00;
text-align: center;
background:#111;
border-radius: 4px;
}
</style>
<script type="text/javascript">
var map, arrow_marker, arrow_options;
var map_center = {lat:41.0, lng:-103.0};
var arrow_icon = {
path: 'M -1.1500216e-4,0 C 0.281648,0 0.547084,-0.13447 0.718801,-0.36481 l 17.093151,-22.89064 c 0.125766,-0.16746 0.188044,-0.36854 0.188044,-0.56899 0,-0.19797 -0.06107,-0.39532 -0.182601,-0.56215 -0.245484,-0.33555 -0.678404,-0.46068 -1.057513,-0.30629 l -11.318243,4.60303 0,-26.97635 C 5.441639,-47.58228 5.035926,-48 4.534681,-48 l -9.06959,0 c -0.501246,0 -0.906959,0.41772 -0.906959,0.9338 l 0,26.97635 -11.317637,-4.60303 c -0.379109,-0.15439 -0.812031,-0.0286 -1.057515,0.30629 -0.245483,0.33492 -0.244275,0.79809 0.0055,1.13114 L -0.718973,-0.36481 C -0.547255,-0.13509 -0.281818,0 -5.7002158e-5,0 Z',
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#fefe99',
fillOpacity: 1,
rotation: 0,
scale: 1.0
};
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: map_center,
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
});
arrow_options = {
position: map_center,
icon: arrow_icon,
clickable: false,
draggable: true,
crossOnDrag: true,
visible: true,
animation: 0,
title: 'I am a Draggable-Rotatable Marker!'
};
arrow_marker = new google.maps.Marker(arrow_options);
arrow_marker.setMap(map);
}
function setRotation(){
var heading = parseInt(document.getElementById('rotation_value').value);
if (isNaN(heading)) heading = 0;
if (heading < 0) heading = 359;
if (heading > 359) heading = 0;
arrow_icon.rotation = heading;
arrow_marker.setOptions({icon:arrow_icon});
document.getElementById('rotation_value').value = heading;
}
</script>
</head>
<body id="document_body" onload="init();">
<div id="rotation_control">
<small>Enter heading to rotate marker </small>
Heading°<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
<small> Drag marker to place marker</small>
</div>
<div id="map_canvas"></div>
</body>
</html>
这正是 Google 所做的，因为它自己在 Maps API 的 SYMBOL 类中可用的几个符号，所以如果这不能说服你......无论如何，我希望这将帮助你正确地制作和设置一个 SVG 标记你的谷歌地图努力。
是的，您可以使用 .svg 文件作为图标，就像使用 .png 或其他图像文件格式一样。只需将图标的url设置为.svg文件所在的目录即可。例如：
var icon = {
url: 'path/to/images/car.svg',
size: new google.maps.Size(sizeX, sizeY),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(sizeX/2, sizeY/2)
};
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: false,
icon: icon
});
width="33px" height="50px" - 请参阅 stackoverflow.com/a/21783089/165673
事情进展顺利，现在您可以使用 SVG 文件了。
marker = new google.maps.Marker({
position: {lat: 36.720426, lng: -4.412573},
map: map,
draggable: true,
icon: "img/tree.svg"
});
正如此线程中的其他人所提到的，不要忘记在 svg 中显式设置宽度和高度属性，如下所示：
<svg id="some_id" data-name="some_name" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 26 42"
width="26px" height="42px">
如果您不这样做，则没有 js 操作可以帮助您，因为 gmap 将没有参考框架并且始终使用标准尺寸。
（我知道在一些评论中提到过，但很容易错过。这些信息在各种情况下都对我有帮助）
好的！我很快在我的网站上完成了这个，我尝试了两种方法来创建自定义谷歌地图标记，这个运行代码使用 canvg.js 是浏览器的最佳兼容性。注释掉的代码目前不支持 IE11。
变量标记； var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 9, 2.6, 10.92, 31.89, 1.6 15.74、2.1、11.3、4、7.4、7.1、4.2、11、2.1、16、1.14]； function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: { lat: 59.325, lng: 18.070 } }); var markerOption = {纬度：59.327，经度：18.067，颜色：“#”+“000”，文本：“ha”}；标记 = createMarker(markerOption);标记.setMap(地图); marker.addListener('click', changeColorAndText); };函数 changeColorAndText() { var iconTmpObj = createSvgIcon( "#c00", "ok" ); marker.setOptions( { icon: iconTmpObj } ); }; function createMarker(options) { //IE MarkerShape 有问题 var markerObj = new google.maps.Marker({ icon: createSvgIcon(options.color, options.text), position: { lat: parseFloat(options.latitude), lng: parseFloat(options.longitude) }, draggable: false, visible: true, zIndex: 10, shape: { coords: CustomShapeCoords, type: 'poly' } });返回标记物； };函数 createSvgIcon(color, text) { var div = $("
"); var svg = $( '' ); div.append(svg); var dd = $("
您需要通过 optimized: false。
例如
var img = { url: 'img/puff.svg', scaledSide: new google.maps.Size(5, 5) };
new google.maps.Marker({position: this.mapOptions.center, map: this.map, icon: img, optimized: false,});
不通过 optimized: false，我的 svg 显示为静态图像。
