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/be11e4d4d626https://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>
Vue
复制代码

 --必须设置其容器大小--否则不显示

 

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     },
ready地图组件事件
复制代码

 

四、以上步骤完成效果

 

五、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
方法
复制代码

六、完成最终对应效果

 

posted @   じ逐梦  阅读(1550)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示