内联 SVG 未在谷歌地图中显示为标记
Unc*_*owd 0 javascript svg google-maps
我在 Illustrator CC 中创建了一个 SVG，它在内联 JS 中声明为变量，尝试了 Illustrator 提供的所有选项，但没有 SVG 的工作。我试图在谷歌地图中使用这个 var 作为标记。我找到了这篇文章：https : //robert.katzki.de/posts/inline-svg-as-google-maps-marker并使用它的内联 SVG 工作，但我的 SVG 没有。有谁知道我应该如何在 Illustrator 中保存 SVG 以使其在 Google 地图中用作标记？这是我正在使用的代码（在本例中，我使用的是文章中的内联 SVG）：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&v=3.21.5a&libraries=drawing&signed_in=true&libraries=places,drawing"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
height: 90%;
}
</style>
<script type="text/javascript">
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(41.0257978,21.293566),
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
zoomControl: false
});
var myIcon = new google.maps.MarkerImage('data:image/svg+xml;utf-8, \
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> \
<path fill="red" stroke="white" stroke-width="1.5" d="M3.5 3.5h25v25h-25z" ></path> \
</svg>', null, null, null, new google.maps.Size(21,30));
google.maps.event.addListener(map, 'click', function(e) {
var myLatLng = {lat: e.latLng.lat(), lng: e.latLng.lng()};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:myIcon
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map">A</div>
</body>
</html>
这是我尝试使用的 SVG：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2DB450;}
.st1{fill:#FFFFFF;}
</style>
<g transform="translate(40 -93)">
<circle class="st0" cx="-255" cy="490" r="45"/>
<path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490
l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/>
</g>
</svg>
编辑：我发现，如果我保存 SVG 文件并在 url 参数中使用文件名而不是在其中嵌入 SVG 代码，则它适用于所有浏览器。但遗憾的是我必须嵌入代码。有人解决这个问题吗？
将您发布的代码中的“带白色边框的红框”SVG 替换为您还发布的 SVG（正如Robert Longson在评论中所观察到的，要在 Chrome 以外的浏览器中工作，#必须进行 URL 编码）：
var myIcon = {
url: 'data:image/svg+xml;utf-8, <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve"><style type="text/css"> .st0{fill:%232DB450;} .st1{fill:%23FFFFFF;}</style><g transform="translate(40 -93)"><circle class="st0" cx="-255" cy="490" r="45"/><path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490 l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/></g></svg>',
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(20, 20)
};
（注意： MarkerImage 类很久以前就被弃用了，取而代之的是 Icon 匿名对象规范）
代码片段：
var myIcon = {
url: 'data:image/svg+xml;utf-8, <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve"><style type="text/css"> .st0{fill:%232DB450;} .st1{fill:%23FFFFFF;}</style><g transform="translate(40 -93)"><circle class="st0" cx="-255" cy="490" r="45"/><path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490 l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/></g></svg>',
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(20, 20)
};
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(41.0257978, 21.293566),
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
zoomControl: false
});
var myIcon = {
url: 'data:image/svg+xml;utf-8, <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve"><style type="text/css"> .st0{fill:%232DB450;} .st1{fill:%23FFFFFF;}</style><g transform="translate(40 -93)"><circle class="st0" cx="-255" cy="490" r="45"/><path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490 l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/></g></svg>',
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(20, 20)
};
google.maps.event.addListener(map, 'click', function(e) {
var myLatLng = {
lat: e.latLng.lat(),
lng: e.latLng.lng()
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: myIcon
});
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: myIcon
});
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}| 归档时间： |
|
| 查看次数： |
2488 次 |
| 最近记录： |