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'), {
            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:

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

来源：https://stackoverflow.com/questions/7462563/svg-marker-on-google-maps-v3

标签

google-maps

google-maps-api-3

svg