百度地图直接用的封装好的--自用vue的(每次项目都要有百度地图,还是搞个封装的差不多的以后可以直接拿来用)

2023-10-31 15:20
文章标签 javascript 封装 项目 百度 vue 直接 地图 frontend 每次 自用 拿来 以后 搞个 差不多

本文主要是介绍百度地图直接用的封装好的--自用vue的(每次项目都要有百度地图,还是搞个封装的差不多的以后可以直接拿来用)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

自用的封装好的,有弹窗,轨迹回放,画点画地图

    • 完整代码
    • 使用

百度地图的官方文档
百度地图必须的三个引用
在这里插入图片描述

完整代码

<template><AButton style="background-color: #3ba7ea;color: white;width: 100px;float: right" @click="buttonClick">轨迹回放</AButton><div  :style="props.style"  id="map"></div></template><script lang="ts">
import moment from "moment";
import {computed, defineComponent, nextTick, onMounted, reactive, ref, watch} from 'vue';
import {colSpan, lg, md, sm, xl, xs, xxl} from "/@/enums/cacheEnum";
import {ifNull, isMyEmpty, replaceNullByLine} from "/@/utils/commonFunctions/commonFunctions";
import {useMessage} from "/@/hooks/web/useMessage";
import {readFile} from "fs-extra";
import endMarker from '/@/assets/images/endMarker.png';
import startMarker from '/@/assets/images/startMarker.png';
import AButton from "/@/components/Button/src/BasicButton.vue";interface variable {pointsTranslateData: any[]points:any[]lineLayer:anytrackingAni:Boolean
}
export default defineComponent({name: "ShowDataForm",props: {data:{type: Array,default: [],require: true},style:{type: String,default: "height: 200px;width: 800px",require: true},transfer:{type: Boolean,default: true,require: true}},components: {AButton},setup(props, { slots }){const {createMessage} = useMessage();const variable = reactive<variable>({pointsTranslateData:[],points:[],lineLayer:{},trackingAni:false,})//创建地图并绘制路线const map=ref();let mapHolder=null;onMounted(()=>{if (props.data.length>0){props.data.forEach((item)=>{var point = new BMapGL.Point(item.longitude, item.latitude);  // 创建点坐标variable.points.push(point)})if (props.transfer){doTransefer(variable.points,callBack)}else {variable.pointsTranslateData=variable.points}}creatMap()})//监听值改变watch(props, (value) => {variable.points=[]props.data.forEach((item)=>{var point = new BMapGL.Point(item.longitude, item.latitude);  // 创建点坐标variable.points.push(point)})if (props.transfer){doTransefer(variable.points,callBack)}else {variable.pointsTranslateData=variable.pointsdrawMap()}})onMounted(()=>{variable.points=[]props.data.forEach((item)=>{var point = new BMapGL.Point(item.longitude, item.latitude);  // 创建点坐标variable.points.push(point)})if (props.transfer){doTransefer(variable.points,callBack)}else {variable.pointsTranslateData=variable.pointsdrawMap()}})const creatMap=()=>{mapHolder = new BMapGL.Map("map");          // 创建地图实例var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标mapHolder.centerAndZoom(point, 15);                 // 初始化地图，设置中var zoomCtrl = new window.BMapGL.ZoomControl();  // 添加缩放控件mapHolder.addControl(zoomCtrl);}//轨迹回放按钮const buttonClick=()=>{variable.trackingAni=truestartTrackAni(mapHolder)}//轨迹回放const startTrackAni=(mapHolder)=>{mapHolder.clearOverlays()mapHolder.removeNormalLayer(variable.lineLayer)creatMark(mapHolder)var pl = new BMapGL.Polyline(variable.pointsTranslateData);var trackAni = new BMapGLLib.TrackAnimation(mapHolder, pl, {overallView: true, // 动画完成后自动调整视野到总览tilt: 30,          // 轨迹播放的角度，默认为55duration: 10000,   // 动画持续时长，默认为10000，单位msdelay: 1000        // 动画开始的延迟，默认0，单位ms});trackAni.start();}//地图绘制const drawMap=()=>{mapHolder.clearOverlays()mapHolder.removeNormalLayer(variable.lineLayer)if (!variable.pointsTranslateData.length>0){return}creatLine(mapHolder)creatMark(mapHolder)creatArrowMark(mapHolder)//自动缩放let res=getCenterPoint(variable.pointsTranslateData);var point = new BMapGL.Point(res[0], res[1]);  // 创建点坐标mapHolder.centerAndZoom(point, res[2]);                 // 初始化地图，设置中}const callBack = (points, traslatePoints) => {variable.pointsTranslateData = traslatePoints;};//输入原始的坐标，然后会调用完成的回调函数 回调函数会给两个参数  转换前的数组  转换后的数组const doTransefer = (points, callBack) => {var convertor = new window.BMapGL.Convertor();let translateCount = 0;let pointsTransLate = [];// 总共需要轮回多少次const max = Math.ceil(points.length / 10) - 1;//转化坐标点const translateCallback = function(data) {if (data.status === 0) {// 遍历转换后的点for (let i = 0; i < data.points.length; i++) {pointsTransLate.push(data.points[i]);}translateCount += 1;// 剩余的还有完整的一轮if ((points.length - (translateCount * 10)) > 10) {convertor.translate(points.slice(translateCount * 10, (translateCount + 1) * 10), 1, 5, translateCallback);} else if ((points.length - (translateCount * 10)) > 0) {// 没有完整的一轮 跑剩下的convertor.translate(points.slice(translateCount * 10, points.length), 1, 5, translateCallback);} else {//跑完了callBack(points, pointsTransLate);}} else {createMessage.error("地图绘制失败: 转换坐标点失败");}};convertor.translate(props.data.slice(0, 10), 1, 5, translateCallback);};//获取缩放比const getRoom =(diff)=> {var room = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14);var diffArr = new Array(360, 180, 90, 45, 22, 11, 5, 2.5, 1.25, 0.6, 0.3, 0.15, 0.07, 0.03, 0);for (var i = 0; i < diffArr.length; i++) {if (diff - diffArr[i] >= 0) {return room[i];}}return 14;}const getCenterPoint=(points) => {//通过经纬度获取中心位置和缩放级别var maxJ = points[0].lng;var minJ = points[0].lng;var maxW = points[0].lat;var minW = points[0].lat;var res;for (var i = points.length - 1; i >= 0; i--) {res = points[i];if (res.lng > maxJ) maxJ = res.lng;if (res.lng < minJ) minJ = res.lng;if (res.lat > maxW) maxW = res.lat;if (res.lat < minW) minW = res.lat;}//就是一个点if (maxJ == minJ && maxW == minW) return [maxJ, maxW, 9];//找经度和维度差 最大的按个var diff = maxJ - minJ;if (diff < maxW - minW) diff = maxW - minW;diff = parseInt(10000 * diff) / 10000;var centerJ = minJ * 1000000 + (1000000 * (maxJ - minJ)) / 2;var centerW = minW * 1000000 + (1000000 * (maxW - minW)) / 2;var zoom = getRoom(diff);return [centerJ / 1000000, centerW / 1000000, zoom];}//选择哪个车const getCarDirction=(points)=>{var startJ = points[0].lng;var startW = points[0].lat;var endJ = points[1].lng;var endW = points[1].lat;let top=true;let left=true;var diffJ=0;var diffW =0;if (startJ>endJ){left=truediffJ=startJ-endJ}else{left=falsediffJ=endJ-startJ}if (startW>endW){//往下top=falsediffW=startW-endW}else{top=truediffW=endW-startW}//只管上下 还是左右if (left){return '/resource/img/carLeft.svg'}else{return '/resource/img/carRight.svg'}}const creatLine=(mapHolder)=>{var polyline =  new window.BMapGL.Polyline(variable.pointsTranslateData, {strokeColor:"#0e6eb8", strokeWeight:2, strokeOpacity:0.5});mapHolder.addOverlay(polyline);}//在两个点之间加箭头const creatArrowMark=(mapHolder)=>{//根据点去画标记// for (let i = 0; i < variable.pointsTranslateData.length-1; i++) {//   console.log('pointsTranslateData',variable.pointsTranslateData[i])//   let centerPoints =  getCenterPoint([variable.pointsTranslateData[i],variable.pointsTranslateData[i+1]])//   let angle= getAngle(variable.pointsTranslateData[i],variable.pointsTranslateData[i+1])//   var center = new window.BMapGL.Point(centerPoints[0], centerPoints[1]);  // 创建点坐标//   var arrowMark= new window.BMapGL.Marker(center, {icon: new window.BMapGL.Icon("/resource/img/gpsArrow.png", new window.BMapGL.Size(10, 10)),rotation:angle});//   //画箭头//   mapHolder.addOverlay(arrowMark);// }}//创建标点const creatMark=(mapHolder)=>{//根据点去画标记for (let i = 0; i < variable.pointsTranslateData.length; i++) {(function(){//闭包 用来解决弹框不对的问题var itemPoint=variable.pointsTranslateData[i]if (i<variable.pointsTranslateData.length-1){let angle= getAngle(variable.pointsTranslateData[i],variable.pointsTranslateData[i+1])console.log("angle",angle)var gpsMark= new window.BMapGL.Marker(itemPoint, {icon: new window.BMapGL.Icon("/resource/img/gpsArrow.png", new window.BMapGL.Size(12, 15),{})});//普通小圆点gpsMark.setRotation(angle)}//特殊的图标if (i===0){//起点gpsMark = new window.BMapGL.Marker(itemPoint, {icon: new window.BMapGL.Icon("/resource/img/startMarker.png", new window.BMapGL.Size(32, 32))});        // 创}else if(i===variable.pointsTranslateData.length-1){//终点gpsMark = new window.BMapGL.Marker(itemPoint, {icon: new window.BMapGL.Icon("/resource/img/endMarker.png", new window.BMapGL.Size(32, 32))});        // 创}else if (i===variable.pointsTranslateData.length-2){//车的位置var startPont=variable.pointsTranslateData[0];var endPont=variable.pointsTranslateData[variable.pointsTranslateData.length-1];let iconDirction=getCarDirction([startPont,endPont])gpsMark= new window.BMapGL.Marker(itemPoint, {icon: new window.BMapGL.Icon(iconDirction, new window.BMapGL.Size(32, 32))});}//画标注mapHolder.addOverlay(gpsMark);let infoWindow= creatinfoWindow(props.data[i])//根据原始数据创建infogpsMark.addEventListener("click", function(){mapHolder.openInfoWindow(infoWindow, itemPoint); //开启信息窗口});})();}}//创建展示弹框const creatinfoWindow=(record)=>{var opts = {width : 200,     // 信息窗口宽度height: 150,     // 信息窗口高度title : "当前车辆信息" , // 信息窗口}var carContent = "<h4 style='margin:0 0 5px 0;'>"+"车牌号:"+ifNull(record.plateNo,'')+"</h4>"+"<h4 style='margin:0 0 5px 0;'>"+"经度:"+ifNull(record.longitude,'')+"</h4>"+"<h4 style='margin:0 0 5px 0;'>"+"维度:"+ifNull(record.latitude,'')+"</h4>"+"<h4 style='margin:0 0 5px 0;'>"+"时间:"+ifNull(record.gpsTime,'')+"</h4>";var infoWindow = new window.BMapGL.InfoWindow(carContent, opts);  // 创建信息窗口对象return infoWindow;}const  getAngle=(start,end)=>{// 通过 a、b 确定角度所处的象限let a = start.lng - end.lng,b = start.lat - end.lat;//let a_c = Math.abs(a),b_c = Math.abs(b);// 获取得三角形的斜边 Math.hypot();let c = Math.hypot(a_c,b_c);// 计算弧度let radina = Math.acos(a_c/c);// 计算角度let angleVal = Math.floor(radina*180/Math.PI);// 处理最终需要旋转的角度if(a > 0){// 第二、三象限if(b>0){// 三angleVal = 90 + 90 - angleVal;}else {angleVal = -180 + angleVal;}}else{// 一、四象限if(b>0){// 四angleVal = angleVal;}else{// 一angleVal = - angleVal;}}return angleVal;}//贴图线const creatImageLine=(mapHolder)=>{//  //线// let upTwo1='/resource/img/red.png'//  variable.lineLayer = new BMapGL.LineLayer({//    enablePicked: true,//    autoSelect: true,//    pickWidth: 30,//    pickHeight: 30,//    opacity: 1,//    selectedColor: 'blue', // 选中项颜色//    style: {//      sequence: false, // 是否采用间隔填充纹理，默认false//      marginLength: 16, // 间隔距离，默认16，单位像素//      // borderColor: 'rgba(ff,144,132,132)',//      // borderMask: true, // 是否受内部填充区域掩膜，默认true,如果存在borderWeight小于0，则自动切换false//      // borderWeight: 2, // 描边宽度，可以设置负值//      strokeWeight: 6, // 描边线宽度，默认0//      strokeLineJoin: 'miter',//描边线连接处类型, 可选'miter', 'round', 'bevel'//      strokeLineCap: 'square',// 描边线端头类型，可选'round', 'butt', 'square'，默认round//      // 填充纹理图片地址，默认是空。图片需要是竖向表达，在填充时会自动横向处理。//      strokeTextureUrl:upTwo1,//      strokeTextureWidth: 16,//      strokeTextureHeight: 64,////      strokeOpacity: .5//    }//  });////  mapHolder.addNormalLayer(variable.lineLayer);//  let lineData={//    "type": "FeatureCollection",//    "features": [//      { "type": "Feature", "properties": { "name": "demo1" },//        "geometry": { "type": "LineString", "coordinates"://            [//              // [116.23128, 40.22077],//            ]}}//    ]//  };//////  variable.pointsTranslateData.forEach((item)=>{//    lineData.features[0].geometry.coordinates.push([item.lng,item.lat])//  })//////  variable.lineLayer.setData(lineData)}return{colSpan,xs,xxl,md,xl,sm,lg,props,map,buttonClick}}});
</script><style scoped></style>

使用

  <BaiDuMap   :transfer="false" :data="variable.points" style="height: 500px;width: 100%;margin-top: 20px"> </BaiDuMap>

去查询gps的数据,反正数据格式一样就行了.现在variable.points是个数组,里面point就俩属性longitude和latitude.其实里面的弹框有用到其他的属性,反正到时候用到啥加啥

 //查询gps信息variable.points=[]if (isMyEmpty(variable.data.loadNo)){}else{let gpsRes=await esbGpsPostionPage({loadNo:variable.data.loadNo});gpsRes.rows.forEach(item=>{//数据格式需要转化let point={longitude:item.lon,latitude:item.lat}variable.points.push(point)})}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

这篇关于百度地图直接用的封装好的--自用vue的(每次项目都要有百度地图,还是搞个封装的差不多的以后可以直接拿来用)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/316274。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
百度/小米/滴滴/京东，中台架构比较

百度/小米/滴滴/京东，中台架构比较

小米中台建设实践 01 小米的三大中台建设：业务+数据+技术 业务中台--从业务说起 在中台建设中，需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况，判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等，再结合其业务发展历程及业务现状，整理了中台架构的核心方法论，一是企业如何共享服务，二是如何为业务提供便利。
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2