Маркер SVG на Google Maps V3 - PullRequest
Новая
       18

Маркер SVG на Google Maps V3

2 голосов
/ 18 сентября 2011

Используя Google Maps API v3, я хочу создать стрелку заданной длины и угла, но сейчас я пытаюсь создать маркер SVG. Я использую утилиту Rich Market и плагин jquery.svg . Следующий код создает div, но не создает SVG. Предложения? (Я не привязан к этим библиотекам, но это то, что я нашел до сих пор). 

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

1 Ответ

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

Проблема в функции div().Вызов $('.arrow') не соответствует создаваемому div, потому что он еще не был присоединен к дереву DOM-узла.Вы должны позвонить после того, как маркер был создан.

Удалите $('.arrow').svg({onLoad: drawCircle}); из функции div() и вызовите ее позже.

function div() {
   var m = document.createElement('DIV');
   m.innerHTML = '<div class="arrow"></div>';
   return m;
}

Полагаю, лучший способ - добавить прослушиватель для события простоя карты в конце функции init(). 

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});
   });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...