手把手编写儿童手机远程监控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 --savedemo演示templatediv idcontainer/div/templatescript setupimport{onMounted,onUnmounted,shallowRef}fromvue;import AMapLoader fromamap/amap-jsapi-loader;import{c}from/myconfig;// 配置安全密钥更安全的做法是将密钥放在环境变量中window._AMapSecurityConfig{securityJsCode:c.gaodesavekey// 替换为你的安全密钥};const mapshallowRef(null);onMounted((){AMapLoader.load({key:c.gaodekey,// 替换为你的Keyversion:2.0,plugins:[AMap.ToolBar,AMap.Scale]// 按需加载插件}).then((AMap){// 初始化地图map.valuenewAMap.Map(container,{viewMode:2D,// 或 3Dzoom: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();});/scriptstyle scoped#container{width:100%;height:100%;/* 必须设置高度否则地图无法显示 */}/style关键点使用 shallowRef 而非 ref 来存储地图实例。因为 Vue 的深度响应式代理可能会干扰高德地图原生对象shallowRef 只监听 .value 的变化是更安全的选择。配置安全密钥通过设置 window._AMapSecurityConfig 对象来配置安全密钥。地图容器确保用于承载地图的 div 元素有明确的宽高。效果如下图
