Vue运用百度地图,添加位置信息(向数据库添加选中位置信息+选择位置的经纬度)--使用Vue百度地图组件
Vue运用百度地图,添加位置信息(向数据库添加选中位置信息+选择位置的经纬度)
--使用Vue百度地图组件
--百度地图上面的小东西都是什么:vue中引入百度地图:一个小白的vue插件探索之路 - 简书 (jianshu.com)
参考网址1---安装-注册-页面使用
https://www.jianshu.com/p/be11e4d4d626
参考网址2---安装-注册-页面使用(对应事件详解)
https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
一、下载百度地图组件 安装vue-baidu-map
npm install vue-baidu-map --save
二、注册,此处进行了全局注册
import BaiduMap from 'vue-baidu-map' //vue 百度地图组件 具体使用可以参考 //https://www.jianshu.com/p/be11e4d4d626 和 https://dafrok.github.io/vue-baidu-map/#/zh/start/installation Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ //在.env.development中编写了密钥 ak: process.env.VUE_APP_Base_BaiduKey })
2-1 .env.development中编写了密钥
--申请自己的百度地图密钥参考:

VUE_APP_Base_BaiduKey='m6yzyjfTCOdDDh2w8aTgdAaY8bVbolW2'
三、页面中使用组件
3-1、定义数据
//#region 使用Vue方式 百度地图 mapData: { //百度地图对象 //中心坐标 center: { lng: 116.404, lat: 39.915 }, //默认设置到北京 //缩放级别 zoom: 11, //起始地点数据 start: { searchKey: "",//根据搜索值 //地图BMap类 BMap: null, //地图map对象 map: null, }, //终点地点数据 end: { searchKey: "",//根据搜索值
BMap: null,//地图BMap类 //地图对象 map: null, }, }, //#endregion
3-2、模板中使用组件

1 <!--vue 开始地址百度地图 scroll-wheel-zoom允许滚轮缩放 2 ready地图组件渲染完毕时触发,返回一个百度地图的核心类和地图实例--> 3 <baidu-map 4 class="baiduContner" 5 :center="mapData.center" 6 :zoom="mapData.zoom" 7 :scroll-wheel-zoom="true" 8 @click="startGetLocation" 9 @ready="startMapHandler" 10 > 11 <bm-local-search 12 :keyword="mapData.start.searchKey" 13 :panel="false" 14 :selectFirstResult="true" 15 ></bm-local-search> 16 <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> 17 <bm-control :offset="{ width: '10px', height: '10px' }"> 18 <bm-auto-complete 19 v-model="mapData.start.searchKey" 20 :sugStyle="{ zIndex: 1 }" 21 > 22 <!-- 搜索框 --> 23 <el-input 24 v-model="mapData.start.searchKey" 25 placeholder="请输入关键词地址" 26 ></el-input> 27 </bm-auto-complete> 28 </bm-control> 29 </baidu-map>
--必须设置其容器大小--否则不显示
3-3、.方法事件处理

1 //#region Vue方式做的百度地图 2 // ready地图组件渲染完毕时触发 3 startMapHandler( 4 { BMap, map } //开始地址地图初始化 5 ) { 6 //保存百度地图类 7 this.mapData.start.BMap = BMap; 8 //保存地图对象 9 this.mapData.start.map = map; 10 //地图预处理 11 this.mapHandler({ BMap, map }); 12 // console.log(BMap); 13 // console.log(map); 14 }, 15 //地图预处理 16 async mapHandler({ BMap, map }) { 17 //创建定位标记 18 let marker = new BMap.Marker( 19 new BMap.Point(this.mapData.center.lng, this.mapData.center.lat) 20 ); 21 //将标记添加到地图上 22 map.addOverlay(marker); 23 }, 24 //选中起始地址点击事件 25 startGetLocation(e) { 26 //通过方法获取经纬度及其他信息 27 //true用来区分他此时是编辑的其实地址还是终点 28 this.getlocation(e, 1); 29 }, 30 getlocation(e, isstart) { 31 let maps; 32 let BMaps; 33 //根据重新选择的地址信息重新赋值--此项目做了起点和终点 34 if (isstart == 1) { 35 BMaps = this.mapData.start.BMap; 36 maps = this.mapData.start.map; 37 } else { 38 BMaps = this.mapData.end.BMap; 39 maps = this.mapData.end.map; 40 } 41 42 //清空地图上所有的覆盖物(刚开始运行的时候有个默认的标记去掉) 43 //(保证每次点击只有一个标记) 44 maps.clearOverlays(); 45 //重新根据所选的地址的经纬度创建定位标记 46 let marker = new BMaps.Marker(new BMaps.Point(e.point.lng, e.point.lat)); 47 //将标记添加到地图上 48 maps.addOverlay(marker); 49 //创建坐标解析对象 50 let geoc = new BMaps.Geocoder(); 51 //解析当前的坐标生成地址信息(省市县区……) 52 geoc.getLocation(e.point, (rs) => { 53 //获取地址对象 54 let addressComp = rs.addressComponents; 55 // console.log(addressComp); 56 if (isstart == 1) { 57 //拼接出详细地址 58 this.StartAddress = 59 addressComp.province + 60 addressComp.city + 61 addressComp.district + 62 addressComp.street + 63 addressComp.streetNumber; 64 this.ruleForm.StartLongitude = e.point.lng; 65 this.ruleForm.StartLatitude = e.point.lat; 66 this.ruleForm.StartPAddress = addressComp.province; 67 this.ruleForm.StartCAddress = addressComp.city; 68 this.ruleForm.StartQAddress = addressComp.district; 69 } else { 70 //拼接出详细地址 71 this.EndAddress = 72 addressComp.province + 73 addressComp.city + 74 addressComp.district + 75 addressComp.street + 76 addressComp.streetNumber; 77 this.ruleForm.EndLongitude = e.point.lng; 78 this.ruleForm.EndLatitude = e.point.lat; 79 dataInfo.EndPAddress = addComp.province; 80 dataInfo.EndCAddress = addComp.city; 81 dataInfo.EndQAddress = addComp.district; 82 } 83 }); 84 },
四、以上步骤完成效果
五、Vue 百度地图显示规划路线(驾车路线规划)--不继承以上操作
https://dafrok.github.io/vue-baidu-map/#/zh/search/driving
5-1 模板中编写组件实现--只提供了地图图片这块代码编辑

1 <el-dialog 2 :title="titleInfo" 3 :visible.sync="dialogThree" 4 width="80%" 5 :before-close="handleClose" 6 :modal="true" 7 :close-on-click-modal="false" 8 > 9 <el-form 10 :model="ruleForm" 11 :rules="rules" 12 ref="ruleForm" 13 label-width="100px" 14 class="demo-ruleForm" 15 > 16 <el-row> 17 <el-col :span="8" 18 >起点: 19 <el-form-item label="经度:" prop="RName"> 20 <el-input 21 v-model="ruleForm.StartLongitude" 22 placeholder="线路起点地址经度" 23 :disabled="true" 24 ></el-input 25 ></el-form-item> 26 <el-form-item label="纬度" prop="RName"> 27 <el-input 28 v-model="ruleForm.StartLatitude" 29 placeholder="线路起点地址纬度" 30 :disabled="true" 31 ></el-input></el-form-item 32 ></el-col> 33 <el-col :span="8" 34 >终点:<el-form-item label="经度:" prop="RName"> 35 <el-input 36 v-model="ruleForm.EndLongitude" 37 placeholder="线路终点地址经度" 38 :disabled="true" 39 ></el-input 40 ></el-form-item> 41 <el-form-item label="纬度" prop="RName"> 42 <el-input 43 v-model="ruleForm.EndLatitude" 44 placeholder="线路终点地址纬度" 45 :disabled="true" 46 ></el-input></el-form-item 47 ></el-col> 48 <el-col :span="8" 49 >当前位置:<el-form-item label="经度:" prop="RName"> 50 <el-input 51 v-model="mapData.get.Lng" 52 placeholder="当前线路终点地址经度" 53 :disabled="true" 54 ></el-input 55 ></el-form-item> 56 <el-form-item label="纬度" prop="RName"> 57 <el-input 58 v-model="mapData.get.Lat" 59 placeholder="线路终点地址纬度" 60 :disabled="true" 61 ></el-input></el-form-item 62 ></el-col> 63 <el-col> 64 <baidu-map 65 class="baiduContner" 66 :center="{ 67 lng: mapData.start.startLng, 68 lat: mapData.start.startLat, 69 }" 70 :zoom="mapData.zoom" 71 :scroll-wheel-zoom="true" 72 @click="getlocationClick" 73 @ready="mapHandler" 74 > 75 <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> 76 <!-- 路线规划 --> 77 <bm-driving 78 :start="{ 79 lng: mapData.start.startLng, 80 lat: mapData.start.startLat, 81 }" 82 :end="{ 83 lng: mapData.end.endLng, 84 lat: mapData.end.endLat, 85 }" 86 :panel="false" 87 :selectFirstResult="true" 88 :auto-viewport="false" 89 ></bm-driving> 90 </baidu-map> 91 </el-col> 92 </el-row> 93 </el-form> 94 </el-dialog>
5-2 定义所需数据

1 data() { 2 return { 3 //#region 路线规划测试所需数据 4 mapData: { 5 //百度地图对象 6 //缩放级别 7 zoom: 12, 8 //地图BMap类 9 BMap: null, 10 //地图map对象 11 map: null, 12 //起始地点数据 13 start: { 14 startLng: null, 15 startLat: null, 16 }, 17 //终点地点数据 18 end: { 19 endLng: null, 20 endLat: null, 21 }, 22 //路线行驶过程的经纬度 23 get: { 24 Lng: null, 25 Lat: null, 26 }, 27 marker: null,//定位标记 28 }, 29 //#endregion 30 }; 31 },
5-3 方法事件处理

1 //#region 线路追踪 2 //线路跟踪测试按钮点击 3 RouterTestClick(val) { 4 this.dialogThree = true; 5 this.ruleForm = val; //赋值 目的反填弹出层所需显示的起点终点经纬度 6 //路线规划的经纬度赋值 7 // console.log(val); 8 // console.log(this.ruleForm); 9 this.mapData.start.startLng = val.StartLongitude; 10 this.mapData.start.startLat = val.StartLatitude; 11 this.mapData.end.endLng = val.EndLongitude; 12 this.mapData.end.endLat = val.EndLatitude; 13 // RouterTest; 14 }, 15 //地图预处理 16 async mapHandler({ BMap, map }) { 17 this.mapData.BMap = BMap; 18 this.mapData.map = map; 19 // console.log(this.mapData); 20 //创建定位标记 21 this.mapData.marker = new BMap.Marker( 22 new BMap.Point(this.mapData.start.startLng, this.mapData.start.startLat) 23 ); 24 //将标记添加到地图上 25 map.addOverlay(this.mapData.marker); 26 }, 27 //追踪地图点击事件 28 getlocationClick(e) { 29 //对应点击位置的经纬度 30 this.mapData.get.Lng = e.point.lng; 31 this.mapData.get.Lat = e.point.lat; 32 let maps; 33 let BMaps; 34 // 百度地图类 35 BMaps = this.mapData.BMap; 36 maps = this.mapData.map; 37 // console.log(e); 38 // console.log(this.mapData.get.Lng); 39 //每次点击生成一个新的定位标志 40 this.mapData.marker.setPosition( 41 new BMaps.Point(e.point.lng, e.point.lat) 42 ); 43 }, 44 45 //#endregion
六、完成最终对应效果
本文来自博客园,作者:じ逐梦,转载请注明原文链接:https://www.cnblogs.com/ZhuMeng-Chao/p/16365594.html
分类:
前端 / Vue(Code)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库