Google地图V3上的SVG标记 [英] SVG marker on Google Maps V3
问题描述
使用Google Maps API v3，我的最终目的是创建一个给定长度和角度的箭头，但现在我试图创建一个SVG标记。我正在使用 Rich Market实用程序和< a href =http://keith-wood.name/svg.html =nofollow> jquery.svg插件。以下代码创建 div ，但不创建SVG。建议？ （我并不喜欢这些库，但这些是我发现的）。
Using Google Maps API v3, my ultimate intent is to create an arrow of a given length and angle, but for now, I am trying to create an SVG marker. I am using the Rich Market utility and the jquery.svg plugin. The following code creates the div, but doesn't create the SVG. Suggestions? (I am not wedded to these libraries, but these are what I found so far).
<head>
<script type="text/javascript">
var map, marker;
function drawCircle(svg) {
svg.circle(15, 15, 10, {fill: 'none', stroke: 'red', strokeWidth: 3});
}
function div() {
var m = document.createElement('DIV');
m.innerHTML = '<div class="arrow"></div>';
$('.arrow').svg({onLoad: drawCircle});
return m;
}
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new RichMarker({
map: map,
position: new google.maps.LatLng(30, 50),
draggable: true,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: div()
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body><div id="map"></div></body>
推荐答案
问题出在 div （）函数。调用 $（'。arrow'）与正在创建的div不匹配，因为它尚未附加到DOM节点树。您必须在创建标记后调用它。
The problem is in div() function. Calling $('.arrow') doesn't match the div that is being created because it hasn't been attached to the DOM node tree yet. You have to call it after the marker has been created.
从<$ c删除 $（'。arrow'）。svg（{onLoad：drawCircle}）; $ c> div（）函数，稍后调用它。
Remove $('.arrow').svg({onLoad: drawCircle}); from div() function and call it later.
function div() {
var m = document.createElement('DIV');
m.innerHTML = '<div class="arrow"></div>';
return m;
}
我想最好的方法是在最后添加地图空闲事件监听器 init（）函数。
I guess the best way is to add listener for map's idle event at the end of init() function.
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new RichMarker({
map: map,
position: new google.maps.LatLng(30, 50),
draggable: true,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: div()
});
google.maps.event.addListenerOnce(map, 'idle', function() {
$('.arrow').svg({onLoad: drawCircle});
});
}
这篇关于Google地图V3上的SVG标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
