谷歌地圖V3上的SVG標記

使用谷歌地圖API v3，我的最終目的是創建一個給定長度和角度的箭頭，但現在我試圖創建一個SVG標記。我正在使用Rich Market utility和jquery.svg plugin。以下代碼創建了div，但不創建SVG。建議？（我並不喜歡這些圖書館，但這些是我迄今發現的）。谷歌地圖V3上的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>

來源

2011-09-18 punkish

問題出在div()函數。調用$('.arrow')與正在創建的div不匹配，因爲它尚未附加到DOM節點樹。您必須在創建標記後調用它。

從div()刪除$('.arrow').svg({onLoad: drawCircle});函數，稍後調用它。

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

來源

2011-09-18 20:32:53 Tomik

謝謝。按預期工作。但是，我意識到我應該提出真正的問題，我現在已經在[http://stackoverflow.com/questions/7465191/creating-an-svg-marker-on-click-event] – punkish

谷歌地圖V3上的SVG標記

回答

相關問題