Google maps 单击事件时创建SVG标记_Google Maps_Google Maps Api 3_Svg

Google maps 单击事件时创建SVG标记

google-maps google-maps-api-3 svg

Google maps 单击事件时创建SVG标记,google-maps,google-maps-api-3,svg,Google Maps,Google Maps Api 3,Svg,这是我的设想：用户单击地图，单击会触发一个Ajax查询，从远程服务器检索“长度”和“角度”值，并使用这些值，然后在单击时绘制给定长度和角度的SVG箭头 Ajax部分很简单，一旦我有了长度和角度，我就可以理解箭头的SVG语法。现在，我正在尝试创建“单击并创建一个随机箭头”。下面的代码可以正常工作。单击“上一步”将创建一个箭头。也就是说，当我点击第1点时，什么都没有发生。然后，当我单击点2时，在点1处会创建一个箭头，依此类推点（n-1），其中n是第n次单击 <head> <styl

这是我的设想：用户单击地图，单击会触发一个Ajax查询，从远程服务器检索“长度”和“角度”值，并使用这些值，然后在单击时绘制给定长度和角度的SVG箭头

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="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>


.quiver{宽度：50px；高度：50px；}
var映射；
函数div（）{
var m=document.createElement（'DIV'）；
m、 innerHTML=''；
返回m；
}
函数init（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（43，-89），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
google.maps.event.addListener（映射，“单击”，函数（事件）{
var marker=新的RichMarker({
地图：地图，
位置：event.latLng，
真的，
平：是的，
主播：RichMarkerPosition.MIDDLE，
目录：div（）
});
$（'.quiver'）.svg({
onLoad：函数（svg）{
svg.line(
Math.random（）*49，Math.random（）*49，Math.random（）*49，Math.random（）*49，
{笔划：“黑色”，笔划宽度：2}
);
}
});
});
/*
google.maps.event.addListenerOnce（map'idle'，function（）{
$（'.quivel'）.svg（{onLoad:drawArrow}）；
});
*/
}
google.maps.event.addDomListener（窗口'load'，init）；

这里的问题与您的类似。当你打电话的时候

$('.quiver').svg({
    onLoad: function(svg) {
        ...
    }
});

在click事件侦听器中，正在创建的标记尚未附加到DOM节点树。很好地阅读了JavaScript中的同步和计时

之所以呈现第（n-1）个箭头，是因为jQuery

$（'.quiver'）

命令选择了具有quiver类的所有元素（即n-1个元素，第n个元素尚未出现在DOM节点树中），并且只有第（n-1）个适用于svg代码

不幸的是，地图的

idle

事件（或谷歌地图API v3中的任何其他事件）在这种情况下对它没有帮助

我想有两种解决方案：

一种解决方案是直接在click事件侦听器中使用jQuery将创建的HTML元素作为目标

$(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}
          );
       }
});

第二种解决方案不是使用jQuery svg插件，而是直接在

div（）

函数中创建svg

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;
}

函数div（）{
var m=document.createElement（'DIV'）；
m、 innerHTML=“”+
'';
返回m；
}

并删除jQuery

$（'.quiver'）.svg（…）命令。
这里的问题与您的类似。当你打电话的时候
$('.quiver').svg({
    onLoad: function(svg) {
        ...
    }
});

在click事件侦听器中，正在创建的标记尚未附加到DOM节点树。很好地阅读了JavaScript中的同步和计时
之所以呈现第（n-1）个箭头，是因为jQuery$（'.quiver'）
命令选择了具有quiver类的所有元素（即n-1个元素，第n个元素尚未出现在DOM节点树中），并且只有第（n-1）个适用于svg代码
不幸的是，地图的idle
事件（或谷歌地图API v3中的任何其他事件）在这种情况下对它没有帮助
我想有两种解决方案：
一种解决方案是直接在click事件侦听器中使用jQuery将创建的HTML元素作为目标
$(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}
          );
       }
});

第二种解决方案不是使用jQuery svg插件，而是直接在div（）
函数中创建svg
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;
}

函数div（）{
var m=document.createElement（'DIV'）；
m、 innerHTML=“”+
'';
返回m；
}

并删除jQuery$（'.quiver'）.svg（…）命令。
谢谢。我非常希望通过jquery.SVG隐藏SVG的复杂性，但是，您的建议2目前对我来说似乎最有效。我相信上面的建议1会找到html div中的所有标记并绘制它们，但效率不如其他选项。第一个建议只针对新创建的标记$（marker.content）仅将jQuery应用于marker.content中的html元素（尽管marker.content可能尚未附加到文档）。因为marker.content中只有两个div，所以应该和第二个建议一样有效。谢谢。我非常希望通过jquery.SVG隐藏SVG的复杂性，但是，您的建议2目前对我来说似乎最有效。我相信上面的建议1会找到html div中的所有标记并绘制它们，但效率不如其他选项。第一个建议只针对新创建的标记$（marker.content）仅将jQuery应用于marker.content中的html元素（尽管marker.content可能尚未附加到文档）。因为marker.content中只有两个div，所以它应该几乎和第二个建议一样有效。