SVG marker on Google Maps V3_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-05 21:45 出处：网络

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

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