开发者

SVG marker on Google Maps V3

Using Google Maps API v3, my ultimate intent is to create an arrow of a given length and angle, but for now, I am trying to create an SVG marker. I am using the Rich Market utility and the jquery.svg plugin. The following code creates the div, but doesn't create the SVG. Suggestions? (I am not wedded to these libraries, but these are what I found so far).

<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'), {
          开发者_如何学Go  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>


The problem is in div() function. Calling $('.arrow') doesn't match the div that is being created because it hasn't been attached to the DOM node tree yet. You have to call it after the marker has been created.

Remove $('.arrow').svg({onLoad: drawCircle}); from div() function and call it later.

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

I guess the best way is to add listener for map's idle event at the end of init() function.

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜