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

概述上节完成vue3高德地图应用能够在一个页面中加载高德地图。使用高德地图需要两步详情参看上节申请高德key安装官方库amap-jsapi-loader在页面给一个div初始化高德api注意div要设置高度否则画面显示空白。templatediv idcontainer/div/div/templateimport{onMounted,onUnmounted,shallowRef,ref}fromvueimport AMapLoader fromamap/amap-jsapi-loaderonMounted((){AMapLoader.load({key:c.gaodekey,version:2.0,plugins:[AMap.ToolBar,AMap.Scale],}).then((AMap2){AMapAMap2;map.valuenewAMap.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信息在地图显示位置坐标将位置坐标设置为地图的中线点templatediv idcontainer/div/templatescript setup langtsimport{onMounted,onUnmounted,shallowRef,ref}fromvueimport AMapLoader fromamap/amap-jsapi-loader(window as any)._AMapSecurityConfig{securityJsCode:c.gaodesavekey,}let AMap:any;const mapshallowRefany(null);// 方式1使用 anyconst routeruseRouter()const routeuseRoute()const dubaoIdroute.params.dubaoId const goBack(){router.back()}const goMore(){showMenu.valuetrue}onMounted((){AMapLoader.load({key:c.gaodekey,version:2.0,plugins:[AMap.ToolBar,AMap.Scale],}).then((AMap2){AMapAMap2;map.valuenewAMap.Map(container,{viewMode:2D,zoom:12,center:[116.397428,39.90923],})map?.value.addControl(newAMap.ToolBar())map?.value.addControl(newAMap.Scale())let stopDate.now();let startstop-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 namedubao.getDuBao(dubaoId as string)?.dubaoName||嘟宝const markernewAMap.Marker({position:newAMap.LngLat(gps.lng,gps.lat),title:name,animation:AMAP_ANIMATION_DROP// 落点动画});marker.on(click,(e:any){const infoWindownewAMap.InfoWindow({content:div stylepadding: 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());}/scriptstyle scoped#container{width:100%;height:100%;}/style运行查看效果