Question

使用Google Maps API v3，我的最终目的是创建一个给定长度和角度的箭头，但是现在，我正在尝试创建一个SVG标记。我使用的是Rich Market utility和jquery.svg plugin。以下代码创建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>

Answer 1

问题出在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});
   });
}

Google Maps V3上的SVG标记

1 个答案: