手把手编写儿童手机远程监控App之vue3使用高德地图
概述
上节讲述嘟妈使用vue3与建立嘟宝webrtc音视频通信后，无法再分享摄像头、麦克风的问题。
嘟宝是为监督孩子身边环境而创建的一套应用，它能够实现后台驻留长连接，随时接收嘟妈信令，建立音视频通道点对点通信，而不需要中转服务器。嘟妈是一套WEB 应用，使用vue3编写，能够兼容app、小程序开发 。而嘟宝采用原生Andorid开发，能够获取最大权限，保持在后台运行。
目前为止，嘟宝完成的基本功能设计包括
- MQTT 基础通信
- 后台驻留
- SQLite数据存储
- 二维码显示身份识别码
- 开启自启动前台服务
- 任务栏消息发送与点击
- 高德定位实时更新
- webrtc点对点通信
- mAgentWeb控件封装解决全屏与获取视频权限问题
嘟妈采用vue3编写它的核心需求已完成包含以下部分: - 完成登录注册页面
- 完成二维码扫描完成与嘟宝绑定
- 与嘟妈建立音视频通信
- 查看嘟宝桌面共享视频
项目地址在github上。
嘟宝地址
嘟妈地址
高德js API
地图 JS API 2.0 是高德开放平台免费提供的第四代 Web 地图渲染引擎， 以 WebGL 为主要绘图手段，本着“更轻、更快、更易用”的服务原则，广泛采用了各种前沿技术，交互体验、视觉体验大幅提升，同时提供了众多新增能力和特性
申请key
之前嘟宝使用高德定位，申请的key。这次在嘟妈使用web key，也需要申请。
安装amap-jsapi-loader库
npm i @amap/amap-jsapi-loader --save
demo演示
<template><div id="container"></div></template><script setup>import{onMounted,onUnmounted,shallowRef}from'vue';import AMapLoader from'@amap/amap-jsapi-loader';import{c}from'@/myconfig';// 配置安全密钥（更安全的做法是将密钥放在环境变量中）window._AMapSecurityConfig={securityJsCode:c.gaodesavekey// 替换为你的安全密钥};const map=shallowRef(null);onMounted(()=>{AMapLoader.load({key:c.gaodekey,// 替换为你的Keyversion:'2.0',plugins:['AMap.ToolBar','AMap.Scale']// 按需加载插件}).then((AMap)=>{// 初始化地图map.value=newAMap.Map('container',{viewMode:'2D',// 或 '3D'zoom:12,center:[116.397428,39.90923]// [经度, 纬度]});// 地图加载完成后，可以添加控件map.value.addControl(newAMap.ToolBar());map.value.addControl(newAMap.Scale());}).catch(e=>{console.error('地图加载失败:',e);});});onUnmounted(()=>{// 组件卸载时销毁地图，释放内存map.value?.destroy();});</script><style scoped>#container{width:100%;height:100%;/* 必须设置高度，否则地图无法显示 */}</style>关键点：
- 使用 shallowRef 而非 ref 来存储地图实例。因为 Vue 的深度响应式代理可能会干扰高德地图原生对象，shallowRef 只监听 .value 的变化，是更安全的选择。
- 配置安全密钥：通过设置 window._AMapSecurityConfig 对象来配置安全密钥。
- 地图容器：确保用于承载地图的 div 元素有明确的宽高。
效果如下图：