程序员经验分享-hwhale

Google 地图 V3 上的 SVG 标记

2023-12-27

使用 Google Maps API v3，我的最终目的是创建一个给定长度和角度的箭头，但现在，我正在尝试创建一个 SVG 标记。我正在使用丰富的市场效用 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/和jquery.svg 插件 http://keith-wood.name/svg.html。以下代码创建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>

问题在于div()功能。呼唤$('.arrow')与正在创建的 div 不匹配，因为它尚未附加到 DOM 节点树。您必须在创建标记后调用它。

Remove $('.arrow').svg({onLoad: drawCircle}); from 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});
   });
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

googlemaps

googlemapsapi3

SVG

Google 地图 V3 上的 SVG 标记 的相关文章

随机推荐

  • android中动画完成时获取对象的位置

    有没有办法在动画结束后找出我的动画 对象 的最终位置 假设我正在使用 TranslateAnimation 和 ScaleAnimation 以及 setFillAfter true 在 1 秒内对父位置为 0 0 20 20 的 Imag

  • 在 Visual Studio Code 中使用多个 Python 内核

    我正在尝试开始使用 Visual Studio Code 和 Don Jayamanne 的 Python Jupyter 扩展 我的系统上同时有 Python 3 5 和 3 6 内核 但我无法使它们对这些扩展都可见 VS Code 中仅

  • 将一些包从基本环境克隆到另一个环境

    我安装了蟒蛇 所以我已经安装了很多软件包 现在我创建了一个新的环境 几乎是空的 并开始向其安装一些特定的软件包 我这台机器上没有互联网 所以我需要将轮子或源文件复制到它 好的 它可以工作 但是当我在基本环境中已经有像 numpy 这样的包时

  • Swift：将不受约束的泛型类型转换为确认可解码的泛型类型

    情况 我有两个通用类 它们将从 api 和数据库获取数据 分别说 APIDataSource 和 DBDataSource 创建视图模型时 我将在视图模型中注入两个类中的任何一个 视图模型将使用该类来获取所需的数据 我希望视图模型与这两个类

  • 给div设置style='height:100%'是什么意思？

    SO上有很多与此相关的问题 但我扫描的都是针对详细的具体情况 我想知道的是 在概念层面上 这意味着什么 div style height 100 100 有多高 100 什么 EDIT 跟进问题 如果100 代表parent的高度 但是pa

  • scikit-learn 分类器的小批量训练，我提供小批量

    我有一个非常大的数据集 无法加载到内存中 我想使用这个数据集作为 scikit learn 分类器的训练集 例如LogisticRegression 是否有可能在我提供小批量的情况下对 scikit learn 分类器进行小批量训练 我相信

  • 如何获取某种类型的所有小部件？

    我有一个绝对面板以及不同的小部件 按钮 图像 标签等 是否可以获取特定类型的所有小部件的集合或数组或其他任何内容 例如图像 干得好 我们可以用iterator Iterator

  • 如何使用xsl打印百分位数

    我正在尝试使用 HTML 报告生成 99 jmeter results detail report 21 xsl文件 我可以使用以下代码打印 90

  • CSS 家谱与名称长度的对齐问题

    我从 CSS3 Family Tree 的实验性多父版本开始 http thecodeplayer com experiment css3 family tree 2 http thecodeplayer com experiment cs

  • C# 相当于 VB“模块”

    在 Visual Basic 中 您可以使用模块作为存储 松散 代码的位置 这些代码可以是可以从应用程序中的其他位置访问的方法和变量 而无需首先初始化某些内容 并且可以设置或更改变量状态 并将始终保持该值 我发现的最接近的是 C 中的静态方

  • 如何检查模板类型是否是变体类型的类型之一？

    考虑到变体类型和模板函数 如何检查模板类型是否是变体的类型之一 还有比下面更优雅的方式吗 typedef boost variant

  • 如何开始使用 oauth for YQL 获取历史股票数据？

    在我寻找市场数据源时 我被引导至雅虎财经的 YQL 它看起来很棒 对于公共使用 查询来说非常简单 但是公共版本的每日限制对于我的需求来说太小了 我得到了我的 yahoo ID 来开始使用 oauth 但我找不到任何好的例子关于我想做的事情

  • 如果 prevInstance 始终为 NULL，为什么它存在于 WinMain 和 wWinMain 中

    由于我是初学者 这可能是一个非常基本的问题 我正在启动 DirectX 11 在创建第一个应用程序时 使用了 wWinMain 在寻找 WinMain 和 wWinMain 之间的差异时 我遇到了这个参数 prevInstance 根据MS

  • 为什么 as_tibble() 将浮点数四舍五入到最接近的整数？

    在 dplyr 0 7 4 和 R 3 4 1 中使用 as tibble 时 我得到以下输出 mtcars gt aggregate disp cyl data mean gt as tibble 哪个输出 A tibble 3 x 2

  • 从视频中提取音频作为 MP3 文件 C#

    我想使用 C 从视频文件中提取音频作为 MP3 音频的比特率应该能够指定 有人可以帮我解决这个问题吗 我已经看过 是否 但我不确定是否可以在不提示 CMD 的情况下使用 是否 请不要向我推荐以下文章 对于大于 700mb 的文件 它无法正常

  • 术语“add-migration”未被识别为 cmdlet 的名称

    因此 从一天到第二天 我的迁移随机停止工作 我做了添加迁移 它说它没有被识别 我正在使用 PM 因为这是一个 asp net mvc 并且前一天正在工作 add migration 术语 add migration 不被识别为 cmdlet

  • 为类属性生成随机数

    我有以下代码 from numpy import random class Person def init self name age random randint 18 65 self name name self age age 我希望

  • 使用 linq 的存储库模式

    当我使用两个不同的生成的 linq 代码时 如何实现 Rob Conery 在 MVC Storefront 1 中显示的所谓 存储库模式 我是否需要像 Fredrik Normen 所讨论的那样实现真正的存储库模式存储库模式的目的是什么

  • 如何在C++中捕获内存不足异常？

    谁能告诉我如何捕获内存不足异常 for ex try while true int i new int catch lt what should be put here exception handling 还有这个 queue

  • Google 地图 V3 上的 SVG 标记

    使用 Google Maps API v3 我的最终目的是创建一个给定长度和角度的箭头 但现在 我正在尝试创建一个 SVG 标记 我正在使用丰富的市场效用 http google maps utility library v3 google

热门标签