程序员经验分享-hwhale

使用网络组件创建带有标记的谷歌地图

2024-02-07

我正在尝试使用聚合物和网络组件在谷歌地图中显示一些标记。

这是我的代码：

<!DOCTYPE html>
<html>
<head lang="fr">
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/platform/platform.js"></script>

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/google-apis/google-apis.html">
    <link rel="import" href="bower_components/google-map/google-map.html">

    <script>
        var airdromes = [
            {
                "name"       : "Anapa-Vityazevo",
                "icao"       : "URKA",
                "country"    : "RU",
                "type"       : "civ",
                "coord"      : {
                    "latitude" : 44.995834,
                    "longitude": 37.334445,
                    "elevation": 147,
                    "heading"  : 41
                },
                "frequencies": {
                    "tower": 121,
                    "tacan": ""
                }
            },
            {
                "name"       : "Batumi",
                "icao"       : "UGSB",
                "country"    : "GE",
                "type"       : "civ",
                "coord"      : {
                    "latitude" : 41.6166667,
                    "longitude": 41.589722223,
                    "elevation": 32,
                    "heading"  : 125
                },
                "frequencies": {
                    "tower": 131,
                    "tacan": "16X (BTM)"
                }
            }
        ];
    </script>

</head>
<body>

<h1>my-map</h1>
<polymer-element name="my-map">
    <template>
        <style>
            google-map {
                display: block;
                width: 400px;
                height: 400px;
            }
        </style>
        <google-map map={{map}} disableDefaultUI fitToMarkers>
            <template repeat="{{airdrome in airdromes}}">
                <google-map-marker map={{map}} latitude="{{airdrome['coord']['latitude']}}"
                                   longitude="{{airdrome['coord']['longitude']}}"></google-map-marker>
            </template>
        </google-map>
    </template>
    <script>
        Polymer('my-map', {
            airdromes: airdromes,
            ready    : function() {
                console.log('this.airdromes :', this.airdromes);
            }
        });
    </script>
</polymer-element>


<my-map></my-map>

</body>
</html>

似乎谷歌地图的所有代码都在这里，标记有迭代。

我遇到的唯一问题是 不显示，插入 时没有宽度和高度，但如果我单独调用它就可以了。

谢谢您的帮助。

EDIT

好吧，经过更多的研究和测试，我终于实现了这一点。 1.导入“google-apis.html”，因为它似乎有助于加载google-map 2.我的google-map样式位于文档的头部，我将其放在第一个

代码已更正。


Polymer 1.0 的工作方式有所不同，您需要创建两个 HTML 页面。 这是代码：

索引.html

<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8">
   <title>Google Map</title>
   <link rel="import" href="bower_components/google-apis/google-apis.html">
   <link rel="import" href="bower_components/google-map/google-map.html">

   <link rel="import" href="mappa.html">
  </head>

  <body>

    <my-map></my-map>

  </body>
</html>

地图.html

<dom-module id="my-map">
<template>
    <style>
        google-map {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
    <google-map map="{{map}}" disableDefaultUI fitToMarkers>
        <template is="dom-repeat" items="{{marker}}">
            <google-map-marker map={{map}} latitude="{{item.latitudine}}" longitude="{{item.longitudine}}">
            </google-map-marker>
        </template>
    </google-map>
</template>

<script>
    Polymer({
        is: 'my-map', 
        ready: function() {
            this.marker = [
                {latitudine: '41.223596', longitudine: '16.296087'},
                {latitudine: '41.222450', longitudine: '16.291259'}
            ];
        }
    });
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

googlemaps

polymer

webcomponent

googlewebcomponent

使用网络组件创建带有标记的谷歌地图 的相关文章

随机推荐

  • 在 Apache 和 WSGI 上部署 Django

    虽然我找到了很多使用 WSGI 在 Apache 上部署 Django 的技术支持 但不幸的是 事实上它们都让我感到困惑 我无法让 Django 运行 我希望这真的是一件容易的工作 但作为一个新人 我面临着困难 我的里面有两个 Django

  • PInvoke、指针和数组复制

    我们正在 c net 4 0 Win7 x64 上构建一个应用程序 目标为 x32 我们在我们的应用程序中使用第三方库 我们知道这个库是用C 编写的 然而 为了让 c 开发人员使用这个库 他们使用 P Invoke 对其进行了包装 这就是我

  • VS2019 中 ASP.NET Core 2.2 项目中的分析器警告

    我基本上有一个从默认 Razor Pages 模板创建的默认 ASP NET Core 2 2 项目 现在 在解决方案资源管理器 gt 依赖项中有一个名为 Analyzers 的节点 首先 一开始我并不知道它是用来做什么的 我想我现在知道了

  • 使用 live() 进行验证并通过 ajax() 提交

    我在 JQuery 中有这个 form validate rules captcha required true remote url gb include captcha php type post messages captcha Co

  • 如何使按钮在引导程序中响应？

    我有这个代码

  • ASP.NET视图状态加密问题

    我正在尝试打开视图状态加密Always作为我在 IIS6 中托管的 ASP NET 3 5 网站的安全措施 我们已关闭视图状态 但仍在此字符串中看到一些 控制状态 在测试环境中 我可以简单地在 web config 中设置以下内容 并且我无

  • 如何围绕现有的 Javascript 库创建 Angular 包装器？

    我有一个纯 JavaScript 库 用户可以通过 npm 安装 我想向该库添加 创建一个 Angular 包装器 以便可以在 Angular 项目中无缝使用它 但我不确定如何执行此操作 我正在使用 Angular cli v6 这非常类似

  • Stringify 删除了具有 Symbol 属性的 JavaScript 对象

    我正在尝试通过 Express 发送 React 组件树 我的组件数组包括关键的 typeof Symbol for react element 财产 我在用着res send 除了该属性之外 对象的其余部分都会通过 有人告诉我这可能与 S

  • 如何动态投射对象？

    我很确定以前有人问过这个问题 但不幸的是我发现的唯一的就是this https stackoverflow com questions 2903450 c sharp how to dynamically cast an object这对我

  • 在同一个项目中使用@jest-environment jsdom和@jest-environment节点[Jest-ReactJS]

    我们在项目中使用 Jest with React Testing Library 进行单元测试 在同一个项目中 我们有一些情况需要 jest environment jsdom 有些情况需要 jest environment节点 我们如何在

  • 确保 ASP.Net 文件上传安全

    我正在创建一个带有文件上传控件的 ASP Net 表单 然后该控件会将表单和文件的详细信息通过电子邮件发送给另一个管理员 我想确保这一点的安全 对于服务器和收件人 附件应该是简历 因此我将其限制为典型的文本文档 据我所知 最好的办法是检查文

  • Matplotlib savefig() 在多个图表上不断保存相同的图表

    所以我有一个函数generategraph file 它根据参数中的数据正确创建条形图 然后保存它 这是保存它的部分 plt show savefile file split txt 0 png plt savefig savefile 然

  • 如何在 Rails 中跳过记录未捕获的异常？

    使用自定义时exceptions app and rescue responses 应用程序可以更好地控制未捕获的异常和过多的日志记录DebugExceptions中间件变成噪音 例如 应用程序知道如何处理ActionPolicy Unau

  • Ruby on Rails：使用 post 方法链接，但参数位于 URL 中

    我在用着 link to My link path arg1 gt session arg1 arg2 gt session arg2 arg3 gt anyobject id method gt post 但生成的 HTML 链接包括 a

  • Twilio 将座席连接到队列中的呼叫

    我有 Twilio 的试用版 只允许使用 1 个电话号码 运行我的应用程序时 我通过 Twilio 进行身份验证 然后 我使用我的个人电话拨打我的 Twilio 号码 该号码会自动添加到我的 支持 队列中 效果很好 可以听到等待音乐 现在

  • DialogFragment 中的 ViewPager，IllegalStateException：Fragment 没有视图

    EDIT3 似乎只有 API17 及以上版本才能使 ViewPager 与 ChildFragmentManager 正常工作 我正在尝试添加一个ViewPager到我的 DialogFragment public class FirstL

  • 使图表在不同区域的背景颜色不同

    我正在使用 ggplot2 包在 R 中制作一个简单的条形图 我不想使用默认的灰色 而是想将背景分为五个区域 每个区域都有不同的 但同样低调的 颜色 我该怎么做呢 更具体地说 我希望五个颜色区域的范围为 0 25 25 45 45 65 6

  • Polymer：什么时候使用异步？

    目的是什么async聚合物中的方法 我应该什么时候使用它 现在我用它就像嗯 这个错误有点奇怪 也许异步会修复它 是的 id did yey 当我洒水时 它并没有给我对我的代码有任何信心async就在出现一些计时错误时 根据您使用的是 Pol

  • 返回“this”作为右值

    正如预期的那样 以下代码无法编译 include

  • 使用网络组件创建带有标记的谷歌地图

    我正在尝试使用聚合物和网络组件在谷歌地图中显示一些标记 这是我的代码

热门标签