Question

Now that I can actually create an SVG marker这是我的愿景：用户点击地图，点击会触发一个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>

Answer 1

此处的问题类似于您的previous question。当你打电话时

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

单击事件侦听器中的

，正在创建的标记尚未附加到DOM节点树。关于JavaScript here中的同步和计时的好读物。

呈现第（n-1）个箭头，因为jQuery $('.quiver')命令选择具有quiver类的所有元素（即n-1个元素，n-th在DOM节点树中不存在）并且只有（n-1）-th适用于svg代码。

不幸的是，地图的idle事件（或Google Maps 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;
}

并在click事件监听器中删除jQuery $('.quiver').svg(...);命令。

在点击事件上创建SVG标记

1 个答案: