更新记录

1.0.3(2022-11-28)

添加H5支持, 并验证H5适配性

1.0.2(2022-11-25)

修复图片展示问题

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

📌 ovt-aed-map

0. 关于团队

我们是小星星志愿者团队开发成员, 也是BetterWorld社区开发者;

1. 制作原因

在致力于AED急救和预演的相关项目工作中,沉淀了关于急救设备的地图组件, 我们把快速找点、附近设备、设备状态等融合为一个地图插件,希望以此为契机,可以为广大的开源人士和有着社会责任感的朋友提供帮助;

这是一个跨端的Dcloud插件,样式素材等都取之于“小星星志愿者”(微信小程序搜索)

代码简单,易用。如页面样式不符合项目需求,可直接修改源码。 可自定义地图选点图标。 适用于App/h5/微信小程序

2. 主要功能

  • 便捷安装, 嵌入任何Dcloud应用即可使用, 支持Hbuilder X插件搜索ovt-aed-map一键导入
  • 全国范围内附近aed设备快捷查询(数据准确度基于公开数据,可能有偏差)
  • 支持简单查看设备点的数据信息
  • 支持展示设备真实信息(数据来源为:志愿者打卡的统计算法)

3. 实现原理

在uni-app自带的组件的基础上,使用@regionchange方法来拿到选择位置的经纬度,

在H5和小程序端,使用组件来实现自定义选点图标。 在App端,使用组件的controls属性实现自定义选点图标。 之后使用腾讯地图SDK,通过经纬度查询该位置的具体信息。(可选, 需要自行申请腾讯地图账号配置)

需要勾选【高德地图】或【百度地图】,并在各自的网站下申请相应的key,填进去。

由于腾讯地图SDK在H5端使用时有跨域问题的出现,所以使用本地导入压缩包的方式。

4. 使用方法

导入该组件

  • 方式一:

使用Hbuilder插件安装, 默认进行全局注册。

  • 方式二: Dcloud官方插件库下载:https://ext.dcloud.net.cn/plugin?name=ovt-aed-map

🎈此时需注意,由于版本不同,引入方法也不同。具体引入方法可以在node_modules文件夹下找到 ovt-aed-map 中的readme.md文件中找到。我这边测试过APP和小程序2个版本:

  • 其它: 腾讯SDK在调用时,需要在 腾讯位置服务 申请Key。当前组件中默认使用的是我自己的测试Key(已删除)。如要在项目中使用,务必申请自己的腾讯地图Key,用以替换。

白名单等设置,可自行参考并设置。(推荐在测试阶段不设置白名单,等上线后设置)

需要位置授权, 提前获取


组件在不同平台的底层引擎是不同的:微信小程序为腾讯地图;H5为腾讯地图或谷歌地图;App、支付宝小程序为高德地图;百度小程序、快应用为百度地图。app-vue也可以使用百度地图,在manifest中配置,打包后生效,但app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要,建议使用高德地图。


H5 端使用地图和定位相关,需要在 manifest.json 内配置腾讯或谷歌等三方地图服务商申请的秘钥(key)
App 端需要申请并配置高德/百度/谷歌地图其中之一, 注意: 不能是腾讯地图, 生态决定了不支持; 同时会有一些样式层级问题, 建议直接源码食用,同时接入真机调试

5. 代码示例

<template>
    <view class="page-section page-section-gap">
        <ovt-aed-map></ovt-aed-map>
    </view>
</template>

<script >
</script>

<style>
    .page-section{
        height: 100vh;
        width: 100vw;
    }
</style>

6. 可选的参数

参数 类型 默认 描述 @onAedItem Fun -- 选择地址后的回调函数 @onAedList Fun -- 选择地址后的回调函数

7. 联系方式

BetterWorld: go to Link

也可在本页面最下面的插件问答区域向我提问

8. 目录结构

ovt-aed-map
│ changelog.md
│ em-01.jpg
│ em-02.png
│ em-03.png
│ LICENSE
│ package.json
│ readme.md
│ structure.txt

├─components
│ ├─com
│ │ equipment-picket-info.vue
│ │ map-center-icon.vue
│ │ map-data.vue
│ │ scope-select.vue
│ │
│ └─ovt-aed-map
│ ovt-aed-map.vue
│ qqmap-wx-jssdk.min.js
│ tencentMap.js

└─static
└─ovt-aed-map
add-icon.png
arrow-active.png
arrow.png
article_center_title.png
center.gif
check-aed.png
checked.png
default.png
dialog1.png
distance.png
distance_icon.png
enter.png
equipment-status-0.png
equipment-status-1.png
equipment-status-2.png
equipment-status-3.png
equipment-status-4.png
high_risk.png
loading-data.gif
low_risk.png
middle_risk.png
position.png
question.png
refresh.png
warn.png

9. 效果图

  • 小程序|APP效果 image

image

image

  • H5 效果图
    image
    image

隐私、权限声明

1. 本插件需要申请的系统权限列表:

地理位置

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问