Vue2集成百度地图2.0超详细步骤

喜欢ヅ旅行 2024-03-26 20:07 24阅读 0赞

> 以下功能实现都较为简单，具体可参考官网

*  **实现的功能及效果**  
    1.可以根据当前IP定位到自己的位置  
    `注：定位需要等待一会儿`  
    ![在这里插入图片描述][2470d41e715e4842be0f032910c5d880.png]

2.可以根据搜索关键字获取位置信息（经纬度，地址）  
![在这里插入图片描述][c8c7fde49c4b4e1dba3b331daee3e3e0.png]

3.点击导航，可以按照车辆驾驶路线进行导航  
![在这里插入图片描述][18cb5f9ac8e14ec6bfaa928707e699aa.png]

*  **获取AK**  
    1.进入百度开放平台，注册账号  
    [百度开放平台][Link 1]  
    2.点击我的应用，创建应用  
    ![在这里插入图片描述][a478f914bbde467f8e9be55d7a60d211.png]  
    ![在这里插入图片描述][2d9b3364d38649159fc6b7c84a99fc4a.png]  
    ![在这里插入图片描述][aa33c3595272443aaff7bbb424ecea25.png]
 *  **引入JS**  
    将引入的`JS`放置在`项目文件夹--》public--》index.html`文件中的图示位置  
    `注意此处应用的版本号为 2.0，版本不一致，会导致代码的写法不一致`

![在这里插入图片描述][dcaf3da507c040f4ad40c98980dfcdf5.png]

*  **使用**

<template>
    	<div class="Map">
    		
    		<div id="container"></div>
    
    		<el-input v-model="searchLocationValue" placeholder="位置" class="handle-input mr10"></el-input>
    
    		<el-button type="primary" class="mr10" @click="searchLocation">搜索</el-button>
    
    		<el-button type="primary" class="mr10" @click="navigation">导航</el-button>
    		
    		<el-button type="primary" class="mr10" @click="fixedPosition">获取我的位置</el-button>
    
    
    
    	</div>
    </template>
    
    
    <script>
    	export default {
        
    		data() {
        
    			return {
        
    				center: {
        
    					lng: 0,
    					lat: 0
    				},
    				zoom: 10,
    				model: {
        
    					lng: '',
    					lat: '',
    					address: ''
    				},
    				map: null,
    				searchLocationValue: '',
    				local: null
    			}
    		},
    		methods: {
        
    
    			/**
    			 * 初始化地图
    			 */
    			initMap() {
        
    				// 创建Map实例 注意要和上面写的div的id名一样
    				this.map = new BMap.Map("container");
    
    				// 初始化地图,设置初始化位置，及地图级别
    				var initPoint=new BMap.Point(116.404, 39.915);
    				this.map.centerAndZoom(initPoint, 12);
    				// 开启鼠标滚轮缩放
    				this.map.enableScrollWheelZoom(true);
    			
    				// 创建标注
    				this.map.addOverlay(new BMap.Marker(initPoint));
    				
    				const _this = this;
    				//添加地图点击事件
    				this.map.addEventListener('click', function(e) {
        
    
    					console.log('点击位置经纬度：' + e.point.lng + ',' + e.point.lat);
    					_this.center.lng = e.point.lng;
    					_this.center.lat = e.point.lat;
    					//清除之前的标记
    					_this.map.clearOverlays();
    					// 创建点标记
    					var point = new BMap.Point(_this.center.lng, _this.center.lat);
    					//获取位置信息
    					var geocoder = new BMap.Geocoder();
    					geocoder.getLocation(point, function(geocoderResult, LocationOptions) {
        
    						//清除之前的标记
    						_this.map.clearOverlays()
    						_this.map.addControl(new BMap.NavigationControl());
    						var marker = new BMap.Marker(point);
    						// 创建标注
    						_this.map.addOverlay(marker);
    						//地址定位成功
    						var address = geocoderResult.address;
    						console.log("所处地址", address)
    					});
    
    				});
    
    
    
    			},
    			/**
    			 * 获取自己的位置
    			 */
    			fixedPosition() {
        
    				const _this = this;
    				var geolocation = new BMap.Geolocation();
    				geolocation.getCurrentPosition(function(r) {
        
    					if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        
    						var mk = new BMap.Marker(r.point);
    						_this.map.addOverlay(mk);
    						_this.map.panTo(r.point);
    						_this.center.lng = r.point.lng;
    						_this.center.lat = r.point.lat;
    
    						var city_name = r.address.province + r.address.city;
    						console.log("当前位置--》", city_name);
    						console.log("当前位置经纬度--》", r.point.lng,r.point.lat);
    					} else {
        
    						console.log('获取失败');
    					}
    				});
    			},
    			/**
    			 * 地图搜索
    			 */
    			searchLocation() {
        
    
    				this.local = new BMap.LocalSearch(this.map, {
        
    					renderOptions: {
        
    						map: this.map
    					},
    					onSearchComplete: this.searchCallback //设置回调函数
    
    				});
    				this.local.search(this.searchLocationValue); //设置搜索参数
    
    			},
    			/**
    			 * 搜索结果的回调函数
    			 */
    			searchCallback() {
        
    				var point = this.local.getResults().getPoi(0).point;
    				//获取第一个智能搜索的结果
    				console.log("当前位置的经纬度",point.lng, point.lat);
    				this.model.lat=point.lat;
    				this.model.lng=point.lng;
    				
    			},
    			/**
    			 * 导航
    			 */
    			navigation(){
        
    				if(this.center.lng==0||this.center.lat==0){
        
    					alert("请先获取您的位置")
    					return
    				}
    				
    				//出发地
    				var p1 = new BMap.Point(this.center.lng, this.center.lat);
    				//目的地
    				var p2 = new BMap.Point(this.model.lng, this.model.lat);
    				
    				var driving = new BMap.DrivingRoute(this.map, {
        
    					renderOptions: {
        
    						map: this.map,
    						autoViewport: true
    					}
    				});
    				driving.search(p1, p2);
    			}
    
    		},
    
    
    		mounted() {
        
    			//初始化地图
    			this.initMap();
    			
    		},
    
    
    	}
    </script>
    
    <style scoped>
    	#l-map {
        
    		height: 360px;
    		width: 100%;
    	}
    
    	#r-result {
        
    		width: 100%;
    	}
    
    	.Map {
        
    		position: fixed;
    		width: 100%;
    		height: 70%;
    
    	}
    
    	#container {
        
    		overflow: hidden;
    		width: 100%;
    		height: 100%;
    		margin: 0;
    		font-family: "微软雅黑";
    	}
    
    
    </style>

*  **更多功能，参考百度API**  
    [JSAPI][]
 *  **局部注册**  
    [局部注册][Link 2]

[2470d41e715e4842be0f032910c5d880.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b63998628a8b46098a8f9c812bda3d78.png
[c8c7fde49c4b4e1dba3b331daee3e3e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b580d8fb59804de685600fa93136ba7d.png
[18cb5f9ac8e14ec6bfaa928707e699aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2312de79ae424688bc29128bc8a851ea.png
[Link 1]: https://lbsyun.baidu.com/apiconsole/key#/home
[a478f914bbde467f8e9be55d7a60d211.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9c9bd35a0e02460492a1d752fe76f4f0.png
[2d9b3364d38649159fc6b7c84a99fc4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a4e3d1d8e5f44fcd9e98305931e2423a.png
[aa33c3595272443aaff7bbb424ecea25.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ef5ec7acf90f45fb99e210ff06413576.png
[dcaf3da507c040f4ad40c98980dfcdf5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/88bf211547964805bf0a3f3856eedaea.png
[JSAPI]: https://lbsyun.baidu.com/jsdemo.htm#aCreateMap
[Link 2]: https://dafrok.github.io/vue-baidu-map/#/zh/start/usage