создание маркера SVG по событию клика - PullRequest
Новая
       14

создание маркера SVG по событию клика

1 голос
/ 19 сентября 2011

Теперь, когда я действительно могу создать маркер SVG , вот мое видение: пользователь нажимает на карту, щелчок запускает 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>

1 Ответ

1 голос
/ 19 сентября 2011

Проблема здесь похожа на ваш предыдущий вопрос . Когда вы звоните 

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

в прослушивателе события click созданный маркер еще не был прикреплен к дереву DOM-узла. Приятное чтение о синхронизации и синхронизации в JavaScript здесь .

(n-1) -я стрелка отображается, потому что команда jQuery $('.quiver') выбирает все элементы с классом колчана (это n-1 элементов, n-й еще нет в дереве узлов DOM) и только код (n-1) применим к коду svg.

К сожалению, событие idle карты (или любое другое событие в Google Maps API v3) в этом случае не поможет.

Я думаю, есть 2 решения проблемы:

Одним из решений является нацеливание созданного HTML-элемента с помощью jQuery непосредственно в прослушиватель событий click. 

$(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, а создать svg непосредственно в функции div(). 

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

и удалите команду jQuery $('.quiver').svg(...); в прослушивателе событий щелчка.

...