谷歌地图

与谷歌地图嵌入和互动的Web组件.

特征

• 显示交互式 Google 映射( E)google-map(中文(简体) )
• 添加可拖放和自定义标记( E)google-map-marker(中文(简体) )
• 根据 Google 的高级标记添加标记(google-map-advanced-marker(中文(简体) )
• 在地图上绘制多边形、多线和矩形(google-map-poly(中文(简体) )
• 界定用于多元素的地理点(google-map-point(中文(简体) )
• 支持标记集群
• 触摸并握住手势模拟右键点击移动

下载发布

Npm 时可用

npm 安装

npm install @flowingcode/google-map

然后导入所需的组件, 如 :

import '@flowingcode/google-map/google-map.js';
import '@flowingcode/google-map/google-map-marker.js';
import '@flowingcode/google-map/google-map-advanced-marker.js';

使用量

<google-map api-key="YOUR_API_KEY" fit-to-markers>
  <google-map-marker latitude="37.78" longitude="-122.4" draggable="true"></google-map-marker>
</google-map>

构建和运行演示

• git 克隆仓库
• npm 安装
• npm 开始

演示会自动打开 http://localhost:8000/demo/。一个有效的 Google 地图 API 密钥 需要 – 作为查询参数通过 :

http://localhost:8000/demo/?api-key=YOUR_API_KEY

聚类:

http://localhost:8000/demo/polys.html?api-key=YOUR_API_KEY

对于高级标记:

http://localhost:8000/demo/advanced-markers.html?api-key=YOUR_API_KEY
http://localhost:8000/demo/advanced-markers-clustering.html?api-key=YOUR_API_KEY

对于标记集群( 可选) map-id 财务报告和审定财务报表 custom-renderer=1 查询参数 :

http://localhost:8000/demo/markers-clustering.html?api-key=YOUR_API_KEY

发布注释

见 这里

问题跟踪

这个加注的出错在它的github.com页面上跟踪. 感谢所有错误报告和特性请求 .

捐款

欢迎捐款。 有两种主要方法可以帮助:通过报告问题或通过拉取请求提交代码修改. 为确保每个人有一个平稳而有效的进程,请遵循下文关于你所作贡献类型的准则.

1. 报告错误和请求特征

制造一个问题是一个非常宝贵的贡献。 如果你发现了一个错误或者有新功能的想法,这就是开始的地方.

• 在创建问题之前, 请检查当前问题是否已经在讨论您的主题 .
• 如果没有,就建立一个新问题。 尽量缩小范围 但尽量详细.

关于臭虫报告的说明

尽管所有细节都很重要,a 最小、可复制的例子 这是你报告中最重要的内容。 因为它消除了歧义 并让我们的团队能够亲眼观察问题 正如你所经历的那样.

2. 通过拉出请求提供代码

作为第一步,请提及我们 发展公约 页面查找关于常规提交和代码样式要求的信息.

然后,遵循这些步骤,作出以下贡献:

• 叉开这个项目.
• 如果还没有关于贡献( 错误或特性) 的问题, 请为该项目创建一个问题 。 尽量把范围减到最小.
• 仔细地开发和测试固定或功能. 只包括解决问题所需的最低数量代码.
• 对于承诺消息, 使用 常规武器委员会 描述你的变化.
• 发送原始工程的拉动请求 .
• 评论您已经执行的最初问题.

开发者指南

开始

<google-map api-key="YOUR_API_KEY" latitude="37.78" longitude="-122.4" zoom="12">
  <google-map-marker latitude="37.78" longitude="-122.4" title="My location"></google-map-marker>
</google-map>

你需要一个有效的 Google 地图 API 密钥 用于使用这些组件.

高级标记

google.maps.Marker,用于 google-map-marker,为 已贬值 赞成: AdvancedMarkerElement启用 google-map-advanced-marker 要使用高级标记。 两种元素都可以用在同一地图上.

高级标记需要 地图标识 (单位:千美元)DEMO_MAP_ID 可用于测试)。 注意,当设定地图标识时 styles 财产 google-map 不应用 : 地图的样式取自 Google Cloud 控制台 .

<google-map api-key="YOUR_API_KEY" map-id="YOUR_MAP_ID" fit-to-markers>
  <google-map-advanced-marker slot="markers" latitude="37.78" longitude="-122.4" title="My location"
      pin-background="#FBBC04" draggable="true"></google-map-advanced-marker>
</google-map>