基于 vue3 封装的高德地图组件集合，配合猎鹰轨迹服务搭建了简易的电子围栏管理系统与企业签到 demo
- 类型提示
- 原生组件封装
- AMapControlBar
- AMapGeolocation
- AMapMap
- AMapMapType
- AMapMarker
- AMapScale
- AMapSearch
- AMapToolbar
- 拓展组件
- AMapFitView
- AMapPositionWatcher
- AMapVector
安装
pnpm add @rthx/vue3-amap引入
import Vue3AMap from '@rthx/vue3-amap'
import '@rthx/vue3-amap/dist/style.css'
import App from './app.vue'
import { createApp } from 'vue'
const app = createApp(App)
app.use(router)
app.use(Vue3AMap, {
key: '', // 你的高德地图 JS KEY
version: '2.0',
errorHandler(error) {}, // 报错处理逻辑，可配置 toast 提示等
})使用
TODO
搭建
git clone https://github.com/tanghongxin/vue3-amap.git
cd vue3-amap
pnpm i启动
pnpm devmock（开发阶段可选开启，避免频繁调用高德接口触发额度限制）
import('../mock');地图加载与接口调用涉及高德开发者密钥，出于安全考虑，项目采用 Nginx 转发的处理方式进行处理，仅代理必要服务。实际开发时请前往高德控制台申请自己的开发者应用
# 自定义地图服务代理
location /_AMapService/v4/map/styles {
set $args "$args&jscode=你的安全密钥";
proxy_pass https://webapi.amap.com/v4/map/styles;
}
# 海外地图服务代理
location /_AMapService/v3/vectormap {
set $args "$args&jscode=你的安全密钥";
proxy_pass https://fmap01.amap.com/v3/vectormap;
}
# Web 服务 API 代理
location /_AMapService/ {
set $args "$args&jscode=你的安全密钥";
proxy_pass https://restapi.amap.com/;
}
# 猎鹰轨迹服务 API 代理
location /geofence/ {
set $args "$args&key=你的Web服务API类型KEY";
proxy_pass https://tsapi.amap.com/v1/track/geofence/;
}
# 输入提示 API 代理
location /inputtips {
set $args "$args&key=你的Web服务API类型KEY";
proxy_pass https://restapi.amap.com/v3/assistant/inputtips;
}-
为什么 PC 调试定位时会失败？
定位实现基于 GPS 与 IP，前者大部分 PC 不具备硬件能力，后者受网络环境因素影响
-
为什么 Chrome 调试定位时会失败？
不同浏览器厂商的定位实现方案有所不同，Chrome 向 Google 发送请求解析定位，由于已知原因可能无法得到正常响应，建议在其他浏览器上进行尝试
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent