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

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

相关文章

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

六个案例搞懂mysql间隙锁

《六个案例搞懂mysql间隙锁》MySQL中的间隙是指索引中两个索引键之间的空间,间隙锁用于防止范围查询期间的幻读,本文主要介绍了六个案例搞懂mysql间隙锁,具有一定的参考价值,感兴趣的可以了解一下... 目录概念解释间隙锁详解间隙锁触发条件间隙锁加锁规则案例演示案例一:唯一索引等值锁定存在的数据案例二:

MySQL 表的内外连接案例详解

《MySQL表的内外连接案例详解》本文给大家介绍MySQL表的内外连接,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录表的内外连接(重点)内连接外连接表的内外连接(重点)内连接内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选,我

如何更改pycharm缓存路径和虚拟内存分页文件位置(c盘爆红)

《如何更改pycharm缓存路径和虚拟内存分页文件位置(c盘爆红)》:本文主要介绍如何更改pycharm缓存路径和虚拟内存分页文件位置(c盘爆红)问题,具有很好的参考价值,希望对大家有所帮助,如有... 目录先在你打算存放的地方建四个文件夹更改这四个路径就可以修改默认虚拟内存分页js文件的位置接下来从高级-

PyCharm如何更改缓存位置

《PyCharm如何更改缓存位置》:本文主要介绍PyCharm如何更改缓存位置的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录PyCharm更改缓存位置1.打开PyCharm的安装编程目录2.将config、sjsystem、plugins和log的路径

Java Stream.reduce()方法操作实际案例讲解

《JavaStream.reduce()方法操作实际案例讲解》reduce是JavaStreamAPI中的一个核心操作,用于将流中的元素组合起来产生单个结果,:本文主要介绍JavaStream.... 目录一、reduce的基本概念1. 什么是reduce操作2. reduce方法的三种形式二、reduce

Spring Boot 整合 Redis 实现数据缓存案例详解

《SpringBoot整合Redis实现数据缓存案例详解》Springboot缓存,默认使用的是ConcurrentMap的方式来实现的,然而我们在项目中并不会这么使用,本文介绍SpringB... 目录1.添加 Maven 依赖2.配置Redis属性3.创建 redisCacheManager4.使用Sp

springboot项目redis缓存异常实战案例详解(提供解决方案)

《springboot项目redis缓存异常实战案例详解(提供解决方案)》redis基本上是高并发场景上会用到的一个高性能的key-value数据库,属于nosql类型,一般用作于缓存,一般是结合数据... 目录缓存异常实践案例缓存穿透问题缓存击穿问题(其中也解决了穿透问题)完整代码缓存异常实践案例Red

Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例

《Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例》本文介绍Nginx+Keepalived实现Web集群高可用负载均衡的部署与测试,涵盖架构设计、环境配置、健康检查、... 目录前言一、架构设计二、环境准备三、案例部署配置 前端 Keepalived配置 前端 Nginx

MySQL 复合查询案例详解

《MySQL复合查询案例详解》:本文主要介绍MySQL复合查询案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录基本查询回顾多表笛卡尔积子查询与where子查询多行子查询多列子查询子查询与from总结合并查询(不太重要)union基本查询回顾查询