jem*_*emz 81 svg google-maps google-maps-api-3
我可以将转换后的image.svg用作谷歌地图图标.我正在将我的png图像转换为svg,我想使用这个像可以旋转的谷歌地图符号.我已经尝试使用谷歌地图符号但我希望有一个像汽车,男人等图标...这就是为什么我将我的一些png文件转换为svg,就像这个示例网站他用于这些http:/ /www.goprotravelling.com/
MrU*_*own 127
您可以使用SVG路径表示法渲染图标.
有关详细信息,请参阅Google文档.
这是一个基本的例子:
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文件作为图标:
Tom*_*Tom 56
如果您需要一个完整的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>
其他信息可以在这里找到.
避免使用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中.
另请参阅在数据URI中优化SVG以获取其他信息.
IE支持: 为了支持IE中的SVG标记,需要两个小的改编,如下所述:IE中的SVG标记.我更新了示例代码以支持IE.
Epi*_*any 27
我知道这篇文章有点陈旧,但我已经看到了很多不好的信息,所以我可以尖叫.所以我只需要用我知道可行的完全不同的方法投入我的两分钱,因为我在许多地图上可靠地使用它.除此之外,我相信OP也希望能够围绕地图点旋转箭头标记,这不同于围绕它自己的x,y轴旋转图标,这将改变箭头标记指向地图上的位置.
首先,请记住我们正在使用谷歌地图和SVG,所以我们必须适应谷歌部署它的标记(或实际符号)的SVG实现的方式.Google将其锚点设置为0,0的SVG标记图像,而不是SVG viewBox的左上角.为了解决这个问题,您必须以不同的方式绘制SVG图像,以便为Google提供它想要的内容...是的答案就是您在SVG编辑器(Illustrator,Inkscape等)中实际创建SVG路径的方式. ).
第一步,就是摆脱viewBox.这可以通过将XML中的viewBox设置为0来实现...这是正确的,只有一个零而不是viewBox的通常四个参数.这会关闭视图框(是的,这在语义上是正确的).当您这样做时,您可能会注意到图像的大小会立即跳跃,这是因为svg不再具有缩放图像的基础(viewBox).因此,我们直接创建该引用,方法是将宽度和高度设置为您希望图像在SVG编辑器的XML编辑器中的实际像素数.
通过在XML编辑器中设置svg图像的宽度和高度,可以创建用于缩放图像的基线,默认情况下,此大小对于标记比例属性将变为值1.您可以看到它对标记的动态缩放的优势.
现在您已经调整了图像大小,移动图像,直到您希望作为锚点的图像部分超过svg编辑器的0,0坐标.完成此操作后,复制svg路径的d属性的值.您会注意到大约一半的数字是负数,这是因为对齐0,0的图像而不是viewBox的锚点.
然后,使用此技术可以在地图上的lat和lng点周围正确旋转标记.这是将您想要的svg标记上的点绑定到标记位置的纬度和长度的唯一可靠方法.
我尝试为此创建一个JSFiddle,但是在实现中存在一些错误,这是我不太喜欢重新解释代码的原因之一.因此,我在下面列出了一个完全自包含的示例,您可以尝试,调整和使用它作为参考.这是我在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>
这正是谷歌为它在Maps API的SYMBOL类中提供的几个符号所做的事情,所以如果这不能说服你...无论如何,我希望这将帮助你正确地制作和设置一个SVG标记您的Google地图精品.
The*_*utC 11
是的,您可以使用.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
});
正如本线程中的其他人所提到的，不要忘记在 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 将没有参考框架并且始终使用标准尺寸。
（我知道在一些评论中已经提到了它，但它们很容易被遗漏。这些信息在各种情况下对我都有帮助）
事情变得更好,现在你可以使用SVG文件.
marker = new google.maps.Marker({
position: {lat: 36.720426, lng: -4.412573},
map: map,
draggable: true,
icon: "img/tree.svg"
});
| 归档时间： |
|
| 查看次数： |
130658 次 |
| 最近记录： |