Google 地图 V3 上的 SVG 标记

发布于 2024-12-05 05:21:30 字数 1393 浏览 3 评论 0原文

使用 Google Maps API v3，我的最终目的是创建一个给定长度和角度的箭头，但现在，我正在尝试创建一个 SVG 标记。我正在使用 Rich Market 实用程序和 < a href="http://keith-wood.name/svg.html" rel="nofollow">jquery.svg 插件。以下代码创建 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城已无爱 2024-12-12 05:21:30

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

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 原文

~没有更多了~