更新记录

1.0.7（2022-12-02） 下载此版本

修复图片排版展示

1.0.6（2022-12-02） 下载此版本

修复示例图片问题

1.0.5（2022-12-02） 下载此版本

修改说明文档

平台兼容性

📌 ovt-aed-map

简介

ovt-aed-map 是一个基于Dcloud的可插拔 开源aed地图组件, 可以在地图中展示附近的aed设备, 并查看任意设备的图片、位置、距离、状态等详细信息;

主要功能

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

实现原理

在uni-app自带的

在H5和小程序端，基于组件来实现自定义选点图标。 在App端，基于

使用方法

导入该组件

• 方式一:

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

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

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

在App端使用，需要勾选【高德地图】或【百度地图】，并在各自的网站下申请相应的key，填进去, 适当调整层级样式以兼容设备。

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

需要位置授权, 可提前获取用户授权

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

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

本组件完全免费, 其它注意事项, 参考官方信息https://uniapp.dcloud.net.cn/component/map?id=map-%e5%9c%b0%e5%9b%be%e7%bb%84%e4%bb%b6

代码示例

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

可选的参数

效果图

• 小程序|APP效果

• H5 效果图
  

关于团队

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

制作原因

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

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

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

联系方式

BetterWorld: go to Link

目录结构

ovt-aed-map
│ changelog.md
│ em-01.png
│ em-0101.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