案例一---位置共享---主次要人物定位

2024-02-01 18:40

本文主要是介绍案例一---位置共享---主次要人物定位,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

位置详细接入说明 https://blog.csdn.net/qq_42027681/article/details/113405971
这里使用模拟定位数据
如果打不开可能还在审核
在这里插入图片描述

位置共享

  • 说明
  • 主要人物
  • 次要人物

说明

主要人物能看到所有人的位置
次要人物只能看到主要人物
次要人物会自动规划一条去主要人物的线路
在这里插入图片描述

在这里插入图片描述

主要人物

<template><view><map id="myMap" :markers="markers" style="width:100%;height:90vh;" :longitude="longitude" :latitude="latitude" scale='16'></map></view>
</template><script>export default {data() {return {markers: [{title: "主要",id: 11,latitude: 33.404659,longitude: 115.089099,label:{content:"主要",color:"#0000ff"},callout: {content: "主要",borderColor: 'blue'},iconPath: "../../../static/mainPeo.png"},{title: "普通1",id: 112,latitude: 33.403977,longitude: 115.088245,label:{content:"普通1",color:"#000000"},callout: {content: "普通1",borderColor: 'blue'},iconPath: "../../../static/somePeo.png"},{title: "普通2",id: 113,label:{content:"普通2",color:"#000000"},latitude: 33.404098,longitude: 115.087183,callout: {content: "普通2",borderColor: 'blue'},iconPath: "../../../static/somePeo.png"}],latitude: 33.404659,longitude: 115.089099}},methods: {}}
</script><style></style>

次要人物

<template><view><map id="myMap" style="width: 100%; height: 90vh" :markers="markers" :longitude="longitude" :latitude="latitude"scale='18' :polyline="polyline" show-location></map></view>
</template><script>var QQMapWX = require('../../../common/qqmap-wx-jssdk.js')//根据自己的路径修改export default {data() {return {fromP: '33.403977,115.088245',toP: '33.404659,115.089099',longitude: 115.088245,latitude: 33.403977,polyline: [],markers: []}},onLoad() {this.test();},methods: {test() {let vm = this;var demo = new QQMapWX({key: '腾讯位置服务key腾讯位置服务官网获取'})demo.direction({mode: 'walking', //可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填//from参数不填默认当前地址from: vm.fromP,to: vm.toP,success: res => {console.log(res)let ret = res;let coors = ret.result.routes[0].polyline;let pl = [];let kr = 1000000;//坐标解压(返回的点串坐标,通过前向差分进行压缩)for (var i = 2; i < coors.length; i++) {coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;}//将解压后的坐标放入点串数组pl中for (var i = 0; i < coors.length; i += 2) {pl.push({latitude: coors[i],longitude: coors[i + 1]})}vm.latitude = pl[0].latitudevm.longitude = pl[0].longitudevm.polyline = [{points: pl,color: '#FF0000DD',width: 4}]let mks = []mks.push({title: "主要",id: 11,latitude: 33.404659,longitude: 115.089099,label: {content: "主要",color: "#0000ff"},callout: {content: "主要",borderColor: 'blue'},iconPath: "../../../static/mainPeo.png"}, {title: "普通1",id: 112,latitude: 33.403977,longitude: 115.088245,label: {content: "普通1",color: "#000000"},callout: {content: "普通1",borderColor: 'blue'},iconPath: "../../../static/somePeo.png"})vm.markers = mks}})}}}
</script>

这篇关于案例一---位置共享---主次要人物定位的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/668123

相关文章

Python中使用正则表达式精准匹配IP地址的案例

《Python中使用正则表达式精准匹配IP地址的案例》Python的正则表达式(re模块)是完成这个任务的利器,但你知道怎么写才能准确匹配各种合法的IP地址吗,今天我们就来详细探讨这个问题,感兴趣的朋... 目录为什么需要IP正则表达式?IP地址的基本结构基础正则表达式写法精确匹配0-255的数字验证IP地

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》:本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN(连接查询)1.1 内连接(INNER JOIN)1.2 左连接(LEFT JOI

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Linux samba共享慢的原因及解决方案

《Linuxsamba共享慢的原因及解决方案》:本文主要介绍Linuxsamba共享慢的原因及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux samba共享慢原因及解决问题表现原因解决办法总结Linandroidux samba共享慢原因及解决

MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

《MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固通俗易懂版)》本文主要讲解了MySQL中的多表查询,包括子查询、笛卡尔积、自连接、多表查询的实现方法以及多列子查询等,通过实际例子和操... 目录复合查询1. 回顾查询基本操作group by 分组having1. 显示部门号为10的部门名,员

Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)

《Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)》本文介绍了如何使用Python和Selenium结合ddddocr库实现图片验证码的识别和点击功能,感兴趣的朋友一起看... 目录1.获取图片2.目标识别3.背景坐标识别3.1 ddddocr3.2 打码平台4.坐标点击5.图

java父子线程之间实现共享传递数据

《java父子线程之间实现共享传递数据》本文介绍了Java中父子线程间共享传递数据的几种方法,包括ThreadLocal变量、并发集合和内存队列或消息队列,并提醒注意并发安全问题... 目录通过 ThreadLocal 变量共享数据通过并发集合共享数据通过内存队列或消息队列共享数据注意并发安全问题总结在 J

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》:本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较:二、开始比较总结概要公司存在多

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程(AOP)是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck