当前位置：首页 > news >正文

手把手编写儿童手机远程监控App之vue3使用高德地图2

news 2026/7/11 22:50:57

概述

上节完成vue3高德地图应用，能够在一个页面中，加载高德地图。使用高德地图，需要两步，详情参看上节

申请高德key
安装官方库amap-jsapi-loader
在页面给一个div，初始化高德api，注意div要设置高度，否则画面显示空白。

<template><div id="container"></div></div></template>import{onMounted,onUnmounted,shallowRef,ref}from'vue'import AMapLoader from'@amap/amap-jsapi-loader'onMounted(()=>{AMapLoader.load({key:c.gaodekey,version:'2.0',plugins:['AMap.ToolBar','AMap.Scale'],}).then((AMap2)=>{AMap=AMap2;map.value=newAMap.Map('container',{viewMode:'2D',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()})

一个简单的高德页面生成了。
嘟宝是为监督孩子身边环境而创建的一套应用，它能够实现后台驻留长连接，随时接收嘟妈信令，建立音视频通道点对点通信，而不需要中转服务器。嘟妈是一套WEB 应用，使用vue3编写，能够兼容app、小程序开发。而嘟宝采用原生Andorid开发，能够获取最大权限，保持在后台运行。
目前为止，嘟宝完成的基本功能设计包括

MQTT 基础通信
后台驻留
SQLite数据存储
二维码显示身份识别码
开启自启动前台服务
任务栏消息发送与点击
高德定位实时更新
webrtc点对点通信
mAgentWeb控件封装解决全屏与获取视频权限问题
嘟妈采用vue3编写它的核心需求已完成包含以下部分:
完成登录注册页面
完成二维码扫描完成与嘟宝绑定
与嘟妈建立音视频通信
查看嘟宝桌面共享视频
项目地址在github上。
嘟宝地址
嘟妈地址
嘟宝实时记录位置在存储本地，嘟妈通过MQTT信令查询当前位置、历史位置，并在地图上显示位置与历史轨迹

地图显示位置

通过mqtt发送信令，获取嘟宝的gps信息
获取到gps信息，在地图显示位置坐标
将位置坐标设置为地图的中线点

<template><div id="container"></div></template><script setup lang="ts">import{onMounted,onUnmounted,shallowRef,ref}from'vue'import AMapLoader from'@amap/amap-jsapi-loader'(window as any)._AMapSecurityConfig={securityJsCode:c.gaodesavekey,}let AMap:any;const map=shallowRef<any>(null);// 方式1：使用 anyconst router=useRouter()const route=useRoute()const dubaoId=route.params.dubaoId const goBack=()=>{router.back()}const goMore=()=>{showMenu.value=true}onMounted(()=>{AMapLoader.load({key:c.gaodekey,version:'2.0',plugins:['AMap.ToolBar','AMap.Scale'],}).then((AMap2)=>{AMap=AMap2;map.value=newAMap.Map('container',{viewMode:'2D',zoom:12,center:[116.397428,39.90923],})map?.value.addControl(newAMap.ToolBar())map?.value.addControl(newAMap.Scale())let stop=Date.now();let start=stop-1000*60*60*24*7;mqtt.pushmsg(dubaoId as string,'gps',JSON.stringify({page:1,rows:1,start:start,stop:stop}));maker({lng:117.397428,lat:39.90923,name:'嘟宝'})}).catch((e)=>{console.error('地图加载失败:',e)})})onUnmounted(()=>{map.value?.destroy()})functionmaker(gps:any){if(!map.value)returnlet name=dubao.getDuBao(dubaoId as string)?.dubaoName||'嘟宝'const marker=newAMap.Marker({position:newAMap.LngLat(gps.lng,gps.lat),title:name,animation:'AMAP_ANIMATION_DROP'// 落点动画});marker.on('click',(e:any)=>{const infoWindow=newAMap.InfoWindow({content:`<div style="padding: 5px;">${name}</div>`,offset:newAMap.Pixel(0,-30),})infoWindow.open(map.value,marker.getPosition())console.log('Marker clicked:',name,e)})// 添加到地图map.value.add(marker);map.value.setCenter(marker.getPosition());}</script><style scoped>#container{width:100%;height:100%;}</style>