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

最新推荐文章于 2024-04-23 11:40:25 发布

亿只王菜菜

最新推荐文章于 2024-04-23 11:40:25 发布

阅读量2k

点赞数 3

文章标签：百度 javascript 前端 vue 百度地图

本文链接：https://blog.csdn.net/qq_46122292/article/details/129436698

版权

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

实现的功能及效果
1.可以根据当前IP定位到自己的位置
注：定位需要等待一会儿

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

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

获取AK
1.进入百度开放平台，注册账号
百度开放平台
2.点击我的应用，创建应用
引入JS
将引入的JS放置在项目文件夹--》public--》index.html文件中的图示位置
注意此处应用的版本号为 2.0，版本不一致，会导致代码的写法不一致

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=刚才申请的AK"></script></script>

在这里插入图片描述

使用

<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>