vue3+element plus 实现百度地图显示路径

news/2024/7/27 10:28:13/文章来源:https://blog.csdn.net/FenceRain/article/details/136496971

在这里插入图片描述

添加依赖

<!-- index.html --><script type="text/javascript" src="//api.map.baidu.com/getscript?v=3.0&ak=yI6kBeC9G4LntEWXklE2iNHwRUrmFEQc"></script><script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script><script type="text/javascript" src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script><script type="text/javascript" src="//api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

实现代码

注意：查询条件使用的自定义组件，不能直接复制使用。点聚合数量多时，页面会卡顿

// BaiduMap.vue
<template><div class="content"><div id="mapContainer" class="map-container"></div><div class="search-content"><div class="header-content" title="点我，点我，点我" @click="handleOpenDrawer"><div class="header-image"><Icon icon="ant-design:search-outlined" /></div><!-- <el-image class="header-content-image" :src="openUrl" fit="fill"></el-image> --><div class="header-control">检索</div></div></div><!-- <div class="drawer-content"></div> --><el-drawer v-model="drawer" title="详细信息" size="20%" @close="closeDrawer"><h-search-form:formModel="searchForm.searchModel":formItems="searchForm.searchItems"@search="handleSearch"/><el-divider content-position="left"><h3>{{ personName }}详细行程</h3></el-divider><el-timeline><template v-for="(item, index) in timelineData" :key="index"><el-timeline-item :timestamp="item.time" placement="top" :color="item.color"><el-card><div v-html="item.content" @click="detailed(item.id)" class="point-list"></div></el-card></el-timeline-item></template></el-timeline></el-drawer></div>
</template><script setup>
import { onMounted } from 'vue'
import { reactive, toRefs, nextTick } from 'vue'
import request from '@/config/axios'
import { data } from '@/views/Test/map.json'
import hSearchForm from '@/h-components/Form/search-form.vue'
import { HSoft } from '@/utils/hsoft'
import { ElDrawer, ElDivider, ElTimeline, ElTimelineItem, ElCard } from 'element-plus'const state = reactive({ak: 'xxxxxxxxxxxxxxxxxxxx',openUrl: new URL('@/assets/imgs/road.png', import.meta.url).href,drawer: false,searchForm: {searchModel: {},searchItems: [{type: 'h-person',// label:'人员',placeholder: '请输入姓名或工号',name: 'senderName',defaultValue: '',span: 3},{type: 'h-date',// label:'创建日期',//   placeholder:'请选择日期',name: 'createTime',valueType: 'daterange',defaultValue: '[new Date(2010, 9, 1), new Date(2010, 10, 1)]',clearable: true,disabled: false,startPlaceholder: '开始日期',endPlaceholder: '结束日期',style: { width: '20%' }}]},map: null,timelineData: [],personName: '',lushu: null,polyline: null,path: [{lng: '113.408984',lat: '23.174023',html: '地点一',pauseTime: 2,name: '叶晨晨'},{lng: '113.406639',lat: '23.174023',html: '地点二',pauseTime: 2,name: '叶晨晨'},{lng: '113.403944',lat: '23.173566',html: '地点三',pauseTime: 3,name: '叶晨晨'},{lng: '113.400827',lat: '23.17394',html: '地点四',pauseTime: 3,name: '叶晨晨'},{lng: '113.397468',lat: '23.174496',html: '地点五',pauseTime: 2,name: '叶晨晨'},{lng: '113.391494',lat: '23.174513',html: '地点六',pauseTime: 4,name: '叶晨晨'},{lng: '113.389032',lat: '23.174588',html: '地点七',pauseTime: 3,name: '叶晨晨'},{lng: '113.388736',lat: '23.173217',html: '地点八',pauseTime: 2,name: '叶晨晨'},{lng: '113.388511',lat: '23.171888',html: '地点九',pauseTime: 2,name: '叶晨晨'},{lng: '113.388592',lat: '23.170501',html: '地点十',pauseTime: 2,name: '叶晨晨'},{lng: '113.38861',lat: '23.170219',html: '地点十一',pauseTime: 2,name: '叶晨晨'},{lng: '113.38861',lat: '23.168342',html: '地点十二',pauseTime: 2,name: '叶晨晨'},{lng: '113.388574',lat: '23.165218',html: '地点十三',pauseTime: 2,name: '叶晨晨'}]
})const { searchForm, openUrl, drawer, timelineData, personName } = toRefs(state)function init() {state.map = new BMap.Map('mapContainer')const point = new BMap.Point(116.404, 39.915)state.map.centerAndZoom(point, 10) //初始化地图，设置中心点坐标和地图级别state.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放state.map.addControl(new BMap.NavigationControl())state.map.addControl(new BMap.ScaleControl())state.map.addControl(new BMap.OverviewMapControl())makePolyPoints(state.map, data)// request({//     url:'@/views/test/map.json',//     method:'get'// }).then(res =>{//     console.log(res);//     state.data = res;// })
}function makePolyPoints(map, data) {const MAPMarkers = []map.clearOverlays()data.forEach((point) => {const markerPoint = new BMap.Point(point.lng, point.lat)const MAPMarker = new BMap.Marker(markerPoint)MAPMarker.setTitle(point.name)// if (point.type == 'ip') {//   // 指定Marker的icon属性为Symbol//   const markerIcon = new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {//     scale: 1, //图标缩放大小//     fillColor: '#f97d1c', //填充颜色//     fillOpacity: 0.8 //填充透明度//   })//   MAPMarker.setIcon(markerIcon)// }if (point.type == 'ip') {// 指定Marker的icon属性为Symbolconst markerIcon = new BMap.Icon(new URL('@/assets/imgs/desktop4.png', import.meta.url).href,new BMap.Size(32, 32),{ anchor: new BMap.Size(16, 16), imageSize: new BMap.Size(32, 32) })MAPMarker.setIcon(markerIcon)}else{const markerIcon = new BMap.Icon(new URL('@/assets/imgs/laptop2.png', import.meta.url).href,new BMap.Size(32, 32),{ anchor: new BMap.Size(16, 16), imageSize: new BMap.Size(32, 32) })MAPMarker.setIcon(markerIcon)}//设置marker图标为水滴{MAPMarkers.push(MAPMarker)// 可以在点对象上添加属性，点击的监听能获取该属性// MAPMarker.zbbm = 'xxxxx';//信息窗体const opts = {width: 200,height: 120,title: point.name + '的位置',enableMessage: true}const sContent ='<p>所在位置：' +point.lng +', ' +point.lat +'</p><div class=item-btn οnclick="recentTrips(' +point.id +')">最近行程</div>'const infoWindow = new BMap.InfoWindow(sContent, opts)MAPMarker.addEventListener('click', function (e) {map.openInfoWindow(infoWindow, markerPoint)})})if (map.markerClusterer) {map.markerClusterer.clearMarkers()}// 使用点聚合map.markerClusterer = new BMapLib.MarkerClusterer(map, {markers: MAPMarkers})
}function handleSearch() {//  state.drawer = false;// var myP1 = new BMap.Point(113.54958146244581,23.131467363279828);    //起点// var myP2 = new BMap.Point(116.424374,39.914668);    //终点// var myIcon = new BMap.Icon("../assets/icons/car.png", new BMap.Size(32, 70), {    //小车图片// 	//offset: new BMap.Size(0, -5),    //相当于CSS精灵// 	imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。// });// var driving2 = new BMap.DrivingRoute(state.map, {renderOptions:{map: state.map, autoViewport: true}});    //驾车实例// driving2.search(myP1, myP2);    //显示一条公交线路state.timelineData = [{time: '2018/4/12',content: '<h4>Update Github template</h4><p>Tom committed 2018/4/12 20:46</p>',color: '#0bbd87',id: 30},{time: '2018/4/3',content: '<h4>Update Github template</h4><p>Tom committed 2018/4/3 20:46</p>',color: '#cf4813',id: 31},{time: '2018/4/2',content: '<h4>Update Github template</h4><p>Tom committed 2018/4/2 20:46</p>',color: '#f0d695',id: 32}]state.personName = '乔蓦然'// // 创建polyline对象makePolyPoints(state.map, state.path)const centerPoint = new BMap.Point(state.path[0].lng, state.path[0].lat)state.map.centerAndZoom(centerPoint, 17) //初始化地图，设置中心点坐标和地图级别makePolyline(state.path)makeLushu(HSoft.deepClone(state.path))
}function makePolyline(path) {let point = []path.forEach((item) => {point.push(new BMap.Point(item.lng, item.lat))})//轨迹显示样式const sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {scale: 0.6, //图标缩放大小strokeColor: '#fff', //设置矢量图标的线填充颜色strokeWeight: '2' //设置线宽})const icons = new BMap.IconSequence(sy, '10', '30')state.polyline = new BMap.Polyline(point, {enableEditing: false, //是否启用线编辑，默认为falseenableClicking: true, //是否响应点击事件，默认为truestrokeColor: '#18a45b', //折线颜色strokeWeight: 8, //折线的宽度，以像素为单位strokeOpacity: 0.5, //折线的透明度，取值范围0 - 1icons: [icons]}) //创建折线state.map.addOverlay(state.polyline) //增加折线
}function makeLushu(path) {let point = []path.forEach((item) => {point.push(new BMap.Point(item.lng, item.lat))})state.lushu = new BMapLib.LuShu(state.map, point, {defaultContent: '坐车车', //默认显示autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整icon: new BMap.Icon(new URL('@/assets/imgs/map-user.png', import.meta.url).href,new BMap.Size(32, 32),{ anchor: new BMap.Size(16, 32), imageSize: new BMap.Size(32, 32) }),speed: 4500,enableRotation: false, //是否设置marker随着道路的走向进行旋转landmarkPois: path})state.lushu.start()
}function handleOpenDrawer() {state.drawer = true
}const recentTrips = (id) => {console.log('近期行程')handleOpenDrawer()state.map.closeInfoWindow()handleSearch()
}function closeDrawer() {console.log('关闭')makePolyPoints(state.map, data)state.personName = ''state.timelineData = []
}function detailed(point) {let points = []switch (point) {case 30:points.push({ lng: '113.388511', lat: '23.171888', id: 30, name: '叶晨晨' })breakcase 31:points.push({ lng: '113.38861', lat: '23.168342', id: 30, name: '叶晨晨' })breakcase 32:points.push({ lng: '113.400827', lat: '23.17394', id: 30, name: '叶晨晨' })break}makePolyPoints(state.map, points)const centerPoint = new BMap.Point(points[0].lng, points[0].lat)state.map.centerAndZoom(centerPoint, 17) //初始化地图，设置中心点坐标和地图级别makePolyline(state.path)
}onMounted(() => {nextTick(() => {init()})window.recentTrips = recentTrips
})
</script><style lang="less" scoped>
.map-container {height: calc(100vh - 84px - 40px);
}:deep(.el-overlay) {width: 20%;position: unset;
}
.search-content {position: absolute;top: 22px;right: 22px;.header-content {cursor: pointer;background: #fff;padding-right: 12px;padding-left: 12px;display: flex;align-items: center;.header-image {width: 25px;}.header-control {font-size: 12px;line-height: 34px;}}
}
:deep(img) {max-width: inherit;
}
:deep(.item-btn) {cursor: pointer;color: #409eff;
}
:deep(.el-timeline) {padding-left: 0px;
}:deep(.BMap_bubble_content) {overflow: auto;height: 90px;
}.point-list {cursor: pointer;
}
</style>

坐标数据

// map.json
{"data":[{"id":1,"lng":"116.404","lat":"39.925","type":"ip","name":"乔乔"},{"id":2,"lng":"116.404","lat":"39.915","type":"ip","name":"孙悟空"},{"id":3,"lng":"116.395","lat":"39.935","name":"唐僧"},{"id":4,"lng":"116.415","lat":"39.931","type":"ip","name":"观音菩萨"},{"id":5,"lng":"111.404","lat":"38.925","name":"土地公公"},{"id":6,"lng":"110.404","lat":"31.925","type":"ip","name":"白龙马"},{"id":7,"lng":"113.384","lat":"24.925","name":"猪八戒"},{"id":8,"lng":"113.404","lat":"23.925","name":"太白金星"},{"id":9,"lng":"112.434","lat":"39.925","name":"沙悟净"},{"id":10,"lng":"116.414","lat":"38.915","name":"哪吒"},{"id":11,"lng":"116.404","lat":"37.925","name":"金毛吼"},{"id":12,"lng":"117.404","lat":"39.925","name":"嫦娥"},{"id":13,"lng":"116.404","lat":"38.925","name":"太上老君"},{"id":14,"lng":"114.404","lat":"38.925","name":"铁扇公主"},{"id":15,"lng":"111.404","lat":"30.925","name":"牛魔王"},{"id":16,"lng":"115.404","lat":"39.915","name":"红孩儿"},{"id":17,"lng":"115.404","lat":"30.925","name":"清风"},{"id":18,"lng":"118.404","lat":"31.925","name":"明月"},{"id":19,"lng":"117.404","lat":"32.925","name":"女儿国王"},{"id":20,"lng":"116.304","lat":"39.825","name":"白骨精"},{"id":21,"lng":"116.404","lat":"39.725","name":"蜘蛛精"},{"id":22,"lng":"116.504","lat":"39.925","name":"孔雀公主"},{"id":23,"lng":"116.414","lat":"39.914","name":"大鹏鸟"},{"id":24,"lng":"116.400","lat":"39.920","name":"老龟"}]
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_997244.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

3.6研究代码（2）

3.6研究代码（2）

指的是微电网运行参数。 在MATLAB中&#xff0c;randi([0,1],1,48) 会生成一个包含1*48个0或1的随机整数数组。这意味着数组中的每个元素都将是0或1。 MATLAB帮助中心&#xff1a;均匀分布的伪随机整数 - MATLAB randi - MathWorks 中国https://ww2.mathworks.cn/help/matlab/r…
阅读更多...
Qt+FFmpeg+opengl从零制作视频播放器-1.项目介绍

Qt+FFmpeg+opengl从零制作视频播放器-1.项目介绍

1.简介 学习音视频开发&#xff0c;首先从做一款播放器开始是比较合理的&#xff0c;每一章节&#xff0c;我都会将源码贴在最后&#xff0c;此专栏你将学习到以下内容&#xff1a; 1&#xff09;音视频的解封装、解码&#xff1b; 2&#xff09;Qtopengl如何渲染视频&#…
阅读更多...
小程序固定头部实现：van-nav-bar插件

小程序固定头部实现：van-nav-bar插件

用的是Vant的NavBar插件&#xff1a; https://youzan.github.io/vant-weapp/#/nav-bar#wai-bu-yang-shi-lei 效果图 页面使用&#xff0c;放开注释的地方就可以显示左边按钮 <van-nav-bar title"精益成本核算" fixed"true" placeholder"true&qu…
阅读更多...
PaddleSeg分割框架解读[01] readme解读

PaddleSeg分割框架解读[01] readme解读

简介 PaddleSeg是基于飞桨PaddlePaddle的端到端图像分割套件，内置45+模型算法及140+预训练模型，支持配置化驱动和API调用开发方式，打通数据标注、模型开发、训练、压缩、部署的全流程，提供语义分割、交互式分割、Matting、全景分割四大分割能力，助力算法在医疗、工业、遥…
阅读更多...
31、Redis 7系列：集群（cluster）

31、Redis 7系列：集群（cluster）

31、Redis 7系列&#xff1a;集群&#xff08;cluster&#xff09; 一、官网二、介绍三、作用1、Redis集群的特点2、集群算法-分片-槽位slot&#xff08;1&#xff09;槽位slot&#xff08;2&#xff09;分片&#xff08;3&#xff09;槽位和分片的优点&#xff08;4&#xff0…
阅读更多...
北斗卫星助力无人机在沙漠播种，促进沙漠治理

北斗卫星助力无人机在沙漠播种，促进沙漠治理

北斗卫星助力无人机在沙漠播种&#xff0c;促进沙漠治理 近年来&#xff0c;随着科技的不断发展&#xff0c;北斗卫星和无人机技术的结合被广泛应用于沙漠治理领域&#xff0c;为解决沙漠化问题提供了全新的思路和解决方案。 近日&#xff0c;黄河“几字弯”北岸的内蒙古自治…
阅读更多...
通过Dockerfile创建镜像

通过Dockerfile创建镜像

通过Dockerfile创建镜像 Docker 提供了一种更便捷的方式&#xff0c;叫作 Dockerfile docker build命令用于根据给定的Dockerfile构建Docker镜像。 docker build语法&#xff1a; # docker build [OPTIONS] <PATH | URL | -> 1. 常用选项说明--build-arg&#xff0c;设置…
阅读更多...
每日一题——LeetCode1592.重新排列单词间的空格

每日一题——LeetCode1592.重新排列单词间的空格

方法一 个人方法 模拟&#xff1a; 把text字符串用空格符分隔成数组&#xff0c;数组长度-1就是原字符串中空格的数量&#xff0c;将数组中的单词都提取到words数组中&#xff0c;有了空格数量和单词数量就能计算出相邻单词间需要的空格数量&#xff0c;维护一个空字符串str&a…
阅读更多...
软件需求分析报告（直接套用）

软件需求分析报告（直接套用）

技术要求 1.1接口要求 1.2可靠性&#xff0c;稳定性&#xff0c;安全性&#xff0c;先进性&#xff0c;拓展性&#xff0c;性能&#xff0c;响应。 2.系统安全需求 2.1物理设计安全 2.2系统安全设计 2.3网络安全设计 2.4应用安全设计 2.5用户安全管理 全套资料过去进主页。
阅读更多...
Unity 常用的4种灯光、制作镜子、灯光的调用修改数值、

Unity 常用的4种灯光、制作镜子、灯光的调用修改数值、

创建灯光时&#xff0c;一般用4种&#xff1a;定向光、点光源、聚光、区域光、 定向光&#xff1a;太阳 点光源&#xff1a;灯泡 聚光灯&#xff1a;手电筒 区域光&#xff1a;烘焙-贴图 灯光选择已烘焙 需要先选择被烘焙的物体&#xff0c;然后再选择Contribute GI 等待进…
阅读更多...
Javaweb之Web后端开发总结的详细解析

Javaweb之Web后端开发总结的详细解析

4. Web后端开发总结 到此基于SpringBoot进行web后端开发的相关知识我们已经学习完毕了。下面我们一起针对这段web课程做一个总结。 我们来回顾一下关于web后端开发&#xff0c;我们都学习了哪些内容&#xff0c;以及每一块知识&#xff0c;具体是属于哪个框架的。 web后端开…
阅读更多...
Vue中的v-for中为什么不推荐使用index作为key值

Vue中的v-for中为什么不推荐使用index作为key值

在Vue中&#xff0c;我们经常会用到v-for指令来遍历数组或对象并渲染列表。而在使用v-for指令时&#xff0c;通常会需要给每个遍历的元素指定一个唯一的key值&#xff0c;以帮助Vue更高效地更新DOM。 在很多情况下&#xff0c;我们可能会倾向于使用index作为key值&#xff0c;…
阅读更多...
Qt 简约美观的加载动画 文本风格 第八季

Qt 简约美观的加载动画 文本风格 第八季

今天和大家分享一个文本风格的加载动画, 有两类,其中一个可以设置文本内容和文本颜色,演示了两份. 共三个动画, 效果如下: 一共三个文件,可以直接编译 , 如果对您有所帮助的话 , 不要忘了点赞呢. //main.cpp #include "LoadingAnimWidget.h" #include <QApplic…
阅读更多...
JAVA工程师面试专题-《消息队列》篇

JAVA工程师面试专题-《消息队列》篇

​​​​​​​ 1、为什么使用消息队列&#xff1f; 解耦、异步、削峰 2、消息队列有什么优缺点 优点&#xff1a;解耦、异步、削峰 缺点&#xff1a;系统可用性降低、系统复杂度提高、一致性问题 3、如何进⾏消息队列选型&#xff1f; Kafka&#xff1a; ○ 优点&…
阅读更多...
2024年最新整理腾讯云学生服务器价格、续费和购买流程

2024年最新整理腾讯云学生服务器价格、续费和购买流程

2024年腾讯云学生服务器优惠活动「云校园」&#xff0c;学生服务器优惠价格&#xff1a;轻量应用服务器2核2G学生价30元3个月、58元6个月、112元一年&#xff0c;轻量应用服务器4核8G配置191.1元3个月、352.8元6个月、646.8元一年&#xff0c;CVM云服务器2核4G配置842.4元一年&…
阅读更多...
ChatGPT在地学、GIS、气象、农业、生态、环境等领域中的应用

ChatGPT在地学、GIS、气象、农业、生态、环境等领域中的应用

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…
阅读更多...
微服务架构中实体类模块化设计与MyBatis-Plus注解浅析

微服务架构中实体类模块化设计与MyBatis-Plus注解浅析

引言 在微服务开发过程中&#xff0c;为了保证代码的整洁性和可维护性&#xff0c;我们通常会将VO&#xff08;视图值对象&#xff09;、DTO&#xff08;数据传输对象&#xff09;、DO&#xff08;领域对象&#xff09;等实体类独立组织成一个API模块。这样做的目的是实现代码…
阅读更多...
第9章：Nginx高级应用场景《Nginx实战：从入门到精通》

第9章：Nginx高级应用场景《Nginx实战：从入门到精通》

随着Web技术的持续演进和业务需求的不断升级&#xff0c;Nginx早已超越了简单的Web服务器角色&#xff0c;成为了处理复杂网络请求和流量管理的多面手。在这一章中&#xff0c;我们将深入挖掘Nginx在高级应用场景中的无限潜力&#xff0c;包括构建坚如磐石的高可用性架构、实施…
阅读更多...
通过zabbix监控docker Mongodb

通过zabbix监控docker Mongodb

通过Zabbix监控Docker容器中的MongoDB服务&#xff0c;可以采取以下步骤&#xff1a; 安装和配置Zabbix Agent2&#xff1a; 在宿主机上安装Zabbix Agent2。确保Agent版本支持Docker监控。配置Zabbix Agent以允许它在容器内执行远程命令或利用Docker插件&#xff08;如果有的话…
阅读更多...
37. 【Linux教程】Linux 文件权限介绍

37. 【Linux教程】Linux 文件权限介绍

前面小节介绍了用户和用户组的相关知识点&#xff0c;有时候某些文件为了安全起见&#xff0c;只有只读权限&#xff0c;没有写入权限和执行权限&#xff0c;而这些权限一般和用户或用户组有关&#xff0c;本小节介绍文件相关的权限。 1. ls -l 查看文件权限相关信息 进入 /ho…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业