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

在这里插入图片描述

添加依赖

<!-- 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.mzph.cn/news/725751.shtml

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

相关文章

【golang】26、retry-go 使用示例和源码解析

【golang】26、retry-go 使用示例和源码解析

文章目录 一、使用方法1.1 http 示例1.1.1 retry.Do1.1.2 retry.DoWithData1.1.3 OnRetry1.1.4 根据 error 的类型&#xff0c;决定 delay 的时长1.1.5 自定义 retry function 二、API2.1 Do 执行2.1.1 Do2.1.2 DoWithData 2.2 Delay 策略2.3 错误处理2.3.1 Unwrap2.3.2 Unwrap…
阅读更多...
idea手动导入插件

idea手动导入插件

idea有时候连接不上 我们去手动下载压缩包 插件网址 选择下载的压缩包导入 导入成功
阅读更多...
算力调度和云计算有何区别

算力调度和云计算有何区别

Canalys发布的研究报告显示&#xff0c;2023年第二季度&#xff0c;全球云基础设施服务支出增长16%&#xff0c;达到724亿美元。 此前云厂商们的高速增长&#xff0c;主要归功于大规模的企业数字化转型和上云。当前市场的增速放缓&#xff0c;除了上云普及带来的市场增量见顶&…
阅读更多...
centos7 部署kibana

centos7 部署kibana

先决条件参考 虚拟机部署elasticsearch集群-CSDN博客 这里使用elk101服务器安装kibana 下载rpm包(这里添加了-c参数用到wget的断点续传功能) #下载kibana-rpm包以及校验文件 wget -c https://artifacts.elastic.co/downloads/kibana/kibana-7.17.18-x86_64.rpm wget -c htt…
阅读更多...
continue、break 和 return 的区别是什么？

continue、break 和 return 的区别是什么？

continue、break和return同样是用于控制程序流程的关键字&#xff0c;它们有不同的作用和用法。 continue: 在Java中&#xff0c;continue语句同样通常用于循环结构&#xff08;如for循环、while循环&#xff09;。当程序执行到continue时&#xff0c;会立刻跳过当前循环中剩…
阅读更多...
02_Git

02_Git

文章目录 GitGit的核心流程Git的命令clone指令status指令add指令commit指令push指令pull指令log指令 Git中处理冲突协同合作Git中回退的措施忽略文件 Git git的特点&#xff1a; 分布式 比如说&#xff1a;同事A、同事B、同事C都能对远程仓库进行操作&#xff0c;就是分布式 …
阅读更多...
微服务分布式中为什么要分库分表呢？

微服务分布式中为什么要分库分表呢？

什么是分库分表&#xff1f; 概念&#xff1a; 分库分表是一种数据库水平扩展的方法&#xff0c;通过将数据分散存储在多个数据库实例或多张表中&#xff0c;以提高系统的性能和扩展性。在Java应用中&#xff0c;可以使用一些数据库中间件或框架来实现分库分表。 为什么要分…
阅读更多...
pytorch什么是梯度

pytorch什么是梯度

目录 1.导数、偏微分、梯度1.1 导数1.2 偏微分1.3 梯度 2. 通过梯度求极小值3. learning rate 1.导数、偏微分、梯度 1.1 导数 对于yx 2 2 2 的导数&#xff0c;描述了y随x值变化的一个变化趋势&#xff0c;导数是个标量反应的是变化的程度&#xff0c;标量的长度反应变化率的…
阅读更多...
【嵌入式——QT】QTableWidget

【嵌入式——QT】QTableWidget

表格小部件为应用程序提供标准的表格显示功能。QTableWidget中的项由QTableWidgetItem提供。 如果你想要一个使用你自己的数据模型的表&#xff0c;你应该使用QTableView而不是这个类。 常用函数 cellWidget(int row, int column) const&#xff1a;返回显示在给定行和列的单…
阅读更多...
【Flutter 面试题】main()和runApp()函数在Flutter的作用分别是什么？有什么关系吗？

【Flutter 面试题】main()和runApp()函数在Flutter的作用分别是什么？有什么关系吗？

【Flutter 面试题】main()和runApp()函数在Flutter的作用分别是什么&#xff1f;有什么关系吗&#xff1f; 文章目录 写在前面解答补充说明 写在前面 关于我 &#xff0c;小雨青年 &#x1f449; CSDN博客专家&#xff0c;GitChat专栏作者&#xff0c;阿里云社区专家博主&…
阅读更多...
论文研读_多目标部署优化：无人机在能源高效无线覆盖中的应用（ImMOGWO）精简版

论文研读_多目标部署优化：无人机在能源高效无线覆盖中的应用（ImMOGWO）精简版

此篇文章为Multi-objective Deployment Optimization of UAVs for Energy-Efficient Wireless Coverage的论文学习笔记&#xff0c;只供学习使用&#xff0c;不作商业用途&#xff0c;侵权删除。并且本人学术功底有限如果有思路不正确的地方欢迎批评指正! 创新点 RD算法 混合…
阅读更多...
第十三届蓝桥杯嵌入式省赛程序设计详细题解

第十三届蓝桥杯嵌入式省赛程序设计详细题解

第十三届蓝桥杯嵌入式省赛题目相对于第十二届较为简单&#xff0c;没有那么多串口的数据处理以及判断&#xff01; 第十三届省赛主要是制作一个可由串口设置密码的密码锁。本实验中&#xff0c;我们将用到LED模块、按键模块、串口模块、定时器的PWM模块以及官方会提供源码的LC…
阅读更多...
【HTML】HTML基础7.3（自定义列表）

【HTML】HTML基础7.3（自定义列表）

目录 标签 效果 代码 注意 标签 <dl> <dt>自定义标题</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd> 。。。。。。 </dl> 效果 代码 <dl><dt>蜘蛛侠系列</dt><dd>蜘蛛侠1</dd…
阅读更多...
LSTM实战：基于PyTorch的新冠疫情确诊人数预测

LSTM实战：基于PyTorch的新冠疫情确诊人数预测

目录 引言 一、探索数据集 1、导入相关库文件 2、导入每日确诊人数数据集 3、清洗每日确诊人数数据集 4、每日累计确诊的人数及其数据集可视化 5、每日撤消累计后的确诊人数及其数据集可视化 6、查看总共有多少数据量 二、数据预处理 1、训练和测试数据集 2、数据放…
阅读更多...
STM32用标准库做定时器定时1秒更新OLED的计数值（Proteus仿真）

STM32用标准库做定时器定时1秒更新OLED的计数值（Proteus仿真）

首先新建proteus工程&#xff0c;绘制电路图&#xff1a; 然后赋值我之前文章中提到的文件夹OLED屏幕显示&#xff1a;&#xff08;没有的自己去那篇文章下载去&#xff09; 然后进入文件夹&#xff1a; 新建两个文件在Mycode文件夹中&#xff1a; 文件关系如下&#xff1a; 新…
阅读更多...
CogCaliperTool卡尺工具

CogCaliperTool卡尺工具

CogCaliperTool(卡尺工具) CogCaliperTool&#xff08;卡尺工具&#xff09;是一种用于测量直线特征的工具。该工具通常用于检测图像中的边缘、轮廓或其他直线特征&#xff0c;并提供精确的测量数据&#xff0c;如长度、角度和位置信息。 比如说我们需要测量下图工具的边缘对…
阅读更多...
【深度学习笔记】计算机视觉——FCN（全卷积网络

【深度学习笔记】计算机视觉——FCN（全卷积网络

全卷积网络 sec_fcn 如 :numref:sec_semantic_segmentation中所介绍的那样&#xff0c;语义分割是对图像中的每个像素分类。 全卷积网络&#xff08;fully convolutional network&#xff0c;FCN&#xff09;采用卷积神经网络实现了从图像像素到像素类别的变换 :cite:Long.Sh…
阅读更多...
校招中的“熟悉linux操作系统”一般是指达到什么程度？

校招中的“熟悉linux操作系统”一般是指达到什么程度？

校招中的“熟悉linux操作系统”一般是指达到什么程度&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Linux的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&am…
阅读更多...
归并排序总结

归并排序总结

1.归并排序 归并排序的步骤如下&#xff1a; ①枚举中点&#xff0c;将区间分为左右两段&#xff1b; ②对左右两段区间分别排序&#xff1b; 这个过程以递归的方式进行。 ③合并两段区间。 是一个模拟的过程。用两个指针分别指向左右区间&#xff0c;判断当前哪个数小&…
阅读更多...
基于机器学习的垃圾分类

基于机器学习的垃圾分类

1绪论 1.1问题背景 垃圾分类有减少环境污染、节省土地资源、再生资源的利用、提高民众价值观念等的好处&#xff0c;在倡导绿色生活&#xff0c;注重环境保护的今天&#xff0c;正确的垃圾分类和处理对我们的生态环境显得尤为重要。 在国外很多国家&#xff0c;经过了几十年…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023