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.rhkb.cn/news/271149.html

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

相关文章

利用Python爬取高德地图全国地铁站点信息

利用Python爬取高德地图全国地铁站点信息

利用Python中的requests库进行地铁站点信息的获取,同时将数据保存在本机excel中 # 首先引入所需要的包 import requests from bs4 import BeautifulSoup import pandas as pd import json# 发送 GET 请求获取网页内容 url http://map.amap.com/subway/index.html response r…
阅读更多...
【算法沉淀】刷题笔记：并查集 带权并查集+实战讲解

【算法沉淀】刷题笔记：并查集 带权并查集+实战讲解

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《数据结构与算法&#xff1a;初学者入门指南》&#x1f4d8;&am…
阅读更多...
ospf虚链路实验简述

ospf虚链路实验简述

1、ospf虚链路实验简述 ospf虚链路配置 为解决普通区域不在骨干区域旁&#xff0c;通过配置Vlink-peer实现不同区域网络设备之间建立逻辑上的连接。 实验拓扑图 r1: sys sysname r1 undo info enable int loopb 0 ip add 1.1.1.1 32 ip add 200.200.200.200 32 quit int e0/0/…
阅读更多...
模拟实现std::string类（包含完整、分文件程序）

模拟实现std::string类（包含完整、分文件程序）

std库中的string是一个类&#xff0c;对string的模拟实现&#xff0c;既可以复习类的特性&#xff0c;也可以加深对std::string的理解。 &#x1f308;一、搭建框架 ☀️1.新命名空间 本质上string是一个储存在库std里面的类&#xff0c;现在需要模拟实现一个string类&#…
阅读更多...
python基础——入门必备知识

python基础——入门必备知识

&#x1f4dd;前言&#xff1a; 本文为专栏python入门基础的第一篇&#xff0c;主要带大家先初步学习一下python中的一些基本知识&#xff0c;认识&#xff0c;了解一下python中的一些专有名词&#xff0c;为日后的学习打下良好的基础,。本文主要讲解以下的python中的基本语法&…
阅读更多...
力扣706：设计哈希映射

力扣706：设计哈希映射

题目&#xff1a; 不使用任何内建的哈希表库设计一个哈希映射&#xff08;HashMap&#xff09;。 实现 MyHashMap 类&#xff1a; MyHashMap() 用空映射初始化对象void put(int key, int value) 向 HashMap 插入一个键值对 (key, value) 。如果 key 已经存在于映射中&#x…
阅读更多...
tcpdump使用pcap-filter抓Vxlan包内数据

tcpdump使用pcap-filter抓Vxlan包内数据

目录 1. 背景2. 参考3. 概念4. 环境5. 用法5.1 抓vxlan通讯中的icmp包5.2 tcpdump抓包命令解析5.2.1 tcpdump命令说明5.2.2 Vxlan协议报文解析 5.3 其他抓包例子5.3.1 抓包示例15.3.2 抓包示例2 1. 背景 看vxlan协议时&#xff0c;发现可以使用tcpdump高级用法&#xff08;pca…
阅读更多...
Unity Samples和帧动画的问题

Unity Samples和帧动画的问题

拖动序列帧图片和自己创建clip的帧率不同 我今天在创建帧动画的时候用了两种方式第一种是直接拖动序列帧图片到Hierachy&#xff0c;然后生成的第二种是这样我发现两者播放的动画速率不一样最后查了半天查不到原因。最后发现是Samples的原因&#xff0c;而且Unity把Samples这个…
阅读更多...
智能控制：物联网智能插座对接文档

智能控制：物联网智能插座对接文档

介绍 一开始买的某米的插座&#xff0c;但是好像接口不开放&#xff0c;所以找到了这个插座&#xff0c;然后自己开发了下&#xff0c;用接口控制插座开关。wifi的连接方式&#xff0c;通电后一般几秒后就会连接上wifi&#xff0c;这个时候通过接口发送命令给他。 产品图片 通…
阅读更多...
b站小土堆pytorch学习记录—— P25-P26 网络模型的使用和修改、保存和读取

b站小土堆pytorch学习记录—— P25-P26 网络模型的使用和修改、保存和读取

文章目录 一、修改1.方法2.代码 二、保存和读取1.方法2.代码&#xff08;1&#xff09;保存&#xff08;2&#xff09;加载 3.陷阱 一、修改 1.方法 add_module(name: str, module: Module) -> None name 是要添加的子模块的名称。 module 是要添加的子模块。 调用 add_m…
阅读更多...
Android车载开发之AAOS快速入门

Android车载开发之AAOS快速入门

一、概述 在正式介绍Android Automotive OS之前，我们先弄清两个概念：Android Auto和Android Automotive OS。 Android Auto Android Auto 不是操作系统，而是一个应用或一个服务。当 Android 手机通过无线或有线方式连接到汽车时，Android 系统会将使用 Android Auto 服务…
阅读更多...
python爬虫（一）

python爬虫（一）

一、python中的NumPy模块&#xff08;数据的存储和处理&#xff09; 这里是下载完成之后的表现 &#xff08;1&#xff09;创建数组 1、使用array&#xff08;&#xff09;函数创建数组 使用array函数可以创建任意维度的的数组 下面是一个创建二维数组的代码示例 下面是代码…
阅读更多...
每日五道java面试题之springMVC篇（一）

每日五道java面试题之springMVC篇（一）

目录&#xff1a; 第一题. 什么是Spring MVC&#xff1f;简单介绍下你对Spring MVC的理解&#xff1f;第二题. Spring MVC的优点第三题. Spring MVC的主要组件&#xff1f;第四题. 什么是DispatcherServlet?第五题. 什么是Spring MVC框架的控制器&#xff1f; 第一题. 什么是S…
阅读更多...
unity学习（49）——服务器三次注册限制以及数据库化角色信息4--角色信息数据库化

unity学习（49）——服务器三次注册限制以及数据库化角色信息4--角色信息数据库化

1.此处下断开始调试,list函数内就有问题&#xff1a; 2. 现在的问题是只读不写&#xff01;32行就是写入部分的代码&#xff1a; 3. 很奇怪&#xff0c;调试的时候确实是写进来了 程序正常执行后&#xff0c;文件中数据也没有消失 关闭服务器文件内容依旧正常。 players包含所…
阅读更多...
安装sqlserver2022最新版只能使用.\SQLEXPRESS登录数据库怎么修改成.

安装sqlserver2022最新版只能使用.\SQLEXPRESS登录数据库怎么修改成.

.\SQLEXPRESS “服务器名称 localhost\SQLEXPRESS”中的 “SQLEXPRESS”就是数据库的实例名称/数据库名/服务器名&#xff0c; “localhost”即登录本计算机安装的数据库 安装sqlserver2022最新版只能使用.\SQLEXPRESS登录数据库怎么修改成. 2、查看SQL Server数据库的实例名…
阅读更多...
Python从0到100（二）：Python语言介绍及第一个Pyhon程序

Python从0到100（二）：Python语言介绍及第一个Pyhon程序

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…
阅读更多...
导数与微分错题本

导数与微分错题本

《1800》 1 缺乏构造函数的技巧 2 3 等价无穷小+构造函数 4
阅读更多...
请说明Vue中的Error Boundaries

请说明Vue中的Error Boundaries

当我们开发基于Vue框架的应用时&#xff0c;我们经常会遇到各种错误处理的情况。Vue提供了一种非常强大且简单的方式来处理这些错误&#xff0c;那就是Error Boundaries&#xff08;错误边界&#xff09;。本文将从概念、用法和示例代码三个方面来详细介绍Vue中的Error Boundar…
阅读更多...
SSD LDPC软错误探测方案解读

SSD LDPC软错误探测方案解读

上一篇文档中，基于SSD LDPC（Low-Density Parity-Check Codes）原理背景和纠错能力作了简单的介绍。 扩展阅读： 关于SSD LDPC纠错能力的基础探究 浅析LDPC软解码对SSD延迟的影响 本篇结合SMI发布的研究成果，通过SSD控制内部LDPC更底层的架构，来解读如何增强软错误探测能力…
阅读更多...
mitmproxy代理

mitmproxy代理

文章目录 mitmproxy1. 网络代理2. 安装3. Https请求3.1 启动mitmproxy3.2 获取证书3.3 配置代理3.4 运行测试 4. 请求4.1 读取请求4.2 修改请求4.3 拦截请求 5. 响应5.1 读取响应5.2 修改响应 6. 案例&#xff1a;共享账号6.1 登录bilibili获取cookies6.2 在代理请求中设置cook…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023