在点击事件中创建一个SVG标记 [英] creating an SVG marker on click event
问题描述
现在我可以创建一个SVG标记，这里是我的愿景：用户点击地图，点击触发Ajax查询，从远程服务器获取长度和角度值，并使用这些值，并在点击处绘制给定长度和角度的SVG箭头。 / p>
Ajax部分很简单，一旦我有了长度和角度，我就可以找出箭头的SVG语法。现在，我试图创建点击并创建一个随机箭头。下面的代码有点作品。在上一次单击中创建箭头。也就是说，当我点击第1点时，没有任何反应。然后，当我点击第2点时，在第1点创建一个箭头，以此类推第（n-1）点，其中n是第n个点击。
< HEAD>
< style type =text / css>
.quiver {width：50px; height：50px;}
< / style>
< script type =text / javascript>
var map;
function div（）{
var m = document.createElement（'DIV'）;
m.innerHTML ='< div class =颤抖>< / div>';
返回m;
函数init（）{
map = new google.maps.Map（document.getElementById（'map'），{
zoom：10，
center：new google.maps.LatLng（43，-89），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
google.maps.event.addListener（map，click，function（event）{
var marker = new RichMarker（{
map：map，
position：event.latLng，
draggable：true，
flat：true，
anchor：RichMarkerPosition.MIDDLE，
content：div（）
}）;
$ b $（'。quiver'）。svg（{
onLoad：function（svg）{
svg.line（
Math.random（）* 49，Math。 Math.random（）* 49，Math.random（）* 49，
{stroke：'black'，strokeWidth：2}
）;
}
}）;
}）;
$ b $ * b $ b google.maps.event.addListenerOnce（map，'idle'，function（）{
$（'。quiver'）。svg（{onLoad：drawArrow }）;
}）;
* /
}
google.maps.event.addDomListener（window，'load'，init）;
< / script>
< / head>
这里的问题与您的以前的问题。当你打电话时
$（'。颤抖'）。svg（{
onLoad：function（svg）{
...
}
}）;
在点击事件侦听器中，正在创建的标记尚未附加到DOM节点树然而。阅读关于JavaScript中的同步和时间的信息此处 。
$ b
第（n-1）个箭头是由于jQuery $（'。颤动'）命令选择所有具有颤动类的元素（即n-1个元素，第n个元素不存在于DOM节点树中），并且只有第（n-1）个元素适用于svg代码。
不幸的是，地图的空闲事件（或Google Maps API v3中的任何其他事件）无助于此情况。 / p>
我猜这有两个解决方案：
一个解决方案是使用jQuery来创建HTML元素直接在click事件监听器中。
$（marker.content）.find（'。quiver'）。svg（{
onLoad：function Math.random（）* 49，Math.random（）* 49，
Math.random（）* 49，Math.random（）* 49 ，
{stroke：'black'，strokeWidth：2}
）;
}
}）;
第二种解决方案不是使用jQuery svg插件，而是直接在<$ c中创建svg
$ p $函数div（）{
var m（）函数。
$ <$ c $> = document.createElement（'DIV'）;
m.innerHTML ='< div class =颤抖>< svg xmlns =http://www.w3.org/2000/svgversion =1.1>'+
'< line x1 =''+ Math.random（）* 49 +'y1 =''+ Math.random（）* 49 +''''+
'x2 =''+数学。 random（）* 49 +'y2 =''+ Math.random（）* 49 +'style =stroke：rgb（0,0,0）; stroke-width：2/>< / svg> ;< / DIV>';
返回m;
}
并删除jQuery $（'。quiver' ）.svg（...）; 点击事件监听器中的命令。
Now that I can actually create an SVG marker here is my vision: The user clicks on the map, the click fires an Ajax query which retrieves "length" and "angle" values from a remote server, and using those values, and SVG arrow of the given lenght and angle is drawn at the click.
The Ajax part is easy, and once I have a length and angle, I can figure out the SVG syntax for an arrow. For now, I am trying to create the "click and create a random arrow". The code below kinda works. An arrow gets created at the "previous" click. That is, when I click on point 1, nothing happens. Then, when I click on point 2, an arrow is created at point 1, and so on for point(n-1) where n is the nth click.
<head>
<style type="text/css">
.quiver {width: 50px; height: 50px;}
</style>
<script type="text/javascript">
var map;
function div() {
var m = document.createElement('DIV');
m.innerHTML = '<div class="quiver"></div>';
return m;
}
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(43, -89),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, "click", function (event) {
var marker = new RichMarker({
map: map,
position: event.latLng,
draggable: true,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: div()
});
$('.quiver').svg({
onLoad: function(svg) {
svg.line(
Math.random()*49, Math.random()*49, Math.random()*49, Math.random()*49,
{stroke: 'black', strokeWidth: 2}
);
}
});
});
/*
google.maps.event.addListenerOnce(map, 'idle', function() {
$('.quiver').svg({onLoad: drawArrow});
});
*/
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
The problem here is similar to your previous question. When you are calling
$('.quiver').svg({
onLoad: function(svg) {
...
}
});
in the click event listener, the marker that's being created hasn't been attached to the DOM node tree yet. Nice reading about synchronization and timing in JavaScript here.
The (n-1)-th arrow is rendered because the jQuery $('.quiver') command selects all elements with quiver class (that's n-1 elements, the n-th isn't present in the DOM node tree yet) and only the (n-1)-th is applicable for the svg code.
Unfortunately, the map's idle event (or any other event in Google Maps API v3) won't help it this case.
I guess there are 2 solutions to the problem:
One solution is to target the created HTML element with jQuery directly in the click event listener.
$(marker.content).find('.quiver').svg({
onLoad: function(svg) {
svg.line(
Math.random()*49, Math.random()*49,
Math.random()*49, Math.random()*49,
{stroke: 'black', strokeWidth: 2}
);
}
});
The second solution is not to use jQuery svg plugin, but rather create the svg directly in div() function.
function div() {
var m = document.createElement('DIV');
m.innerHTML = '<div class="quiver"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">' +
'<line x1="' + Math.random()*49 + '" y1="' + Math.random()*49 + '" ' +
'x2="' + Math.random()*49 + '" y2="' + Math.random()*49 + '" style="stroke:rgb(0,0,0);stroke-width:2"/></svg></div>';
return m;
}
and delete the jQuery $('.quiver').svg(...); command in the click event listener.
这篇关于在点击事件中创建一个SVG标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
