vue3使用百度地图

最新推荐文章于 2024-08-16 11:47:06 发布

sereposika

最新推荐文章于 2024-08-16 11:47:06 发布

阅读量7.9k

点赞数 8

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_51737221/article/details/120993058

版权

这篇博客介绍了如何在Vue.js应用中集成百度地图API，包括申请AK、引入资源、渲染地图以及创建可拖拽的起点和终点标注。详细步骤包括设置地图中心点、缩放、添加控件，以及监听标注拖拽事件来更新经纬度。同时，展示了如何通过输入框设置和获取经纬度，实现地图上的点定位。

摘要由CSDN通过智能技术生成

一、调用

1、在百度地图开发中心中申请ak

百度地图开放平台 | 百度地图API SDK | 地图开发

选择浏览器端，白名单处填*表示全部开放

在我的应用中可以找到申请的ak值

2、引入资源

（1）npm install BMap

（2）在index中引入

	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<ak值>"></script>

（3）在vue.config.js中添加以下代码

configureWebpack: config => {
    	config.externals = {
			        "BMap": "BMap",
		},
}

3、渲染地图

<template>
	<div id="allmap" v-bind:style="mapStyle"></div>
</template>
<script>
import BMap from 'BMap'
export default {
 data () {
      return {
          mapStyle: {
		marginLeft:20+'px',
          height: 400 + 'px',
        },
    },
    methods(){
    createMap(){
			 var map = new BMap.Map('allmap')    // 创建Map实例
      map.centerAndZoom(new BMap.Point(114,23), 10)  // 初始化地图,设置中心点坐标和地图级别
       map.addControl(new BMap.MapTypeControl());//地图的显示类型：包括地图和卫星
	//  map.addControl(new BMap.ScaleControl()) // 添加比例尺控件
      map.enableScrollWheelZoom(true)     //开启鼠标滚轮缩放
		 map.setMinZoom(15);
		 map.setMaxZoom(20);
      // 编写自定义函数,创建标注
      function addMarker (point) {
        var marker = new BMap.Marker(point)
        //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        // var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});//创建标注
        // marker.setLabel(label);//获取标注
        map.addOverlay(marker)
		var opts = {
	    width : 200,     // 信息窗口宽度
	    height: 100,     // 信息窗口高度
	    title : "故宫博物院" , // 信息窗口标题
	    message:"这里是故宫"
	}
	var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
	marker.addEventListener("click", function(){          
		map.openInfoWindow(infoWindow, point); //开启信息窗口
	});
      }
    
	  
      addMarker(point)
		
		},
    }
}

</script>

二、使用可拖拽图标，实现起点终点定位

<template>

    <div id="map" class="map" style="height: 30rem;width: 77rem;" >
	</div>
	<div style="margin-top:20px;font-size:16px;font-weight: 500;">
		<span style="margin-right:20px">起点</span>
	<el-input v-model="p1.lng" placeholder="经度" class="inputWideth"></el-input>
	<el-input v-model="p1.lat" placeholder="纬度" class="inputWideth"></el-input>
		<span style="margin-right:20px;font-size:16px;font-weight: 500;">终点</span>
	<el-input v-model="p2.lng" placeholder="经度" class="inputWideth"></el-input>
	<el-input v-model="p2.lat" placeholder="纬度" class="inputWideth"></el-input>
	</div>
	
</template>

<script>
    import BMap from 'BMap'
	export default {
		components: {
		},
		data() {
			return {
				
				p1:{
					lng:'',
					lat:'',
				},
				p2:{
					lng:'',
					lat:'',
				},

			}
		},
		methods: {
		     initMap(){
				   var map = new BMap.Map("map"); // 创建地图实例
				   var point2 = new BMap.Point(114,23); // 创建点坐标
				 var myIconn = new BMap.Icon("http:///17655终点 (3).png", new BMap.Size(112,64 ));//使用在线引入的方式使用起点终点图标

				   //var opts = { width: 250, height: 150, title: "数字水产" }; //信息窗口
				   map.centerAndZoom(point2, 15);  // 初始化地图，设置中心点坐标和地图级别
				   map.addControl(new BMap.NavigationControl());
				   var marker = new BMap.Marker(point2,{icon:myIconn,
					enableDragging: true}); // 创建标注
				 
				   map.addOverlay(marker);
				   marker.enableDragging();
				    map.addControl(new BMap.MapTypeControl());//地图的显示类型：包括地图和卫星
				   //标注拖拽后的位置
				   let that=this;
				   marker.addEventListener("dragend", function (e) {
				       console.log("当前位置：" + e.point.lng + ", " + e.point.lat);
						that.p2.lng=e.point.lng;
						that.p2.lat=e.point.lat;
				// 		var ppp1 = new BMap.Point(that.p1.lng,that.p1.lat);
    			//   		var ppp2 = new BMap.Point(that.p2.lng,that.p2.lat);
				//   //console.log(pp1,pp2);
				//  		var drivingg = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
				// 		 console.log(drivingg);
    			//    		drivingg.search(ppp1, ppp2);
				   });
				   //点击的位置
				   map.addEventListener("click", function (e) {
				    var pointClick=  new BMap.Point(e.point.lng , e.point.lat);
					var gc = new BMap.Geocoder();
					gc.getLocation(pointClick, function (rs) {
					    console.log(rs.addressComponents);//地址信息
					    console.log(rs.address)
						// var infoWindow = new BMap.InfoWindow("<div style='color:red;'>"
						// +"经度:"+e.point.lat+"<br/>"
						// +"纬度:"+e.point.lng+"<br/>"
						// +"省:"+rs.addressComponents.province+"<br/>"
						// +"市:"+rs.addressComponents.city+"<br/>"
						// +"区:"+rs.addressComponents.district+"<br/>"
						// +"街道:"+rs.addressComponents.street+"<br/>"
						// +"</div>", opts);
						//    map.openInfoWindow(infoWindow, pointClick);
						});
					});
					
				//  var p1 = new BMap.Point(113,22);
    			// var p2 = new BMap.Point(113, 22);

    			// var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    			// driving.search(p1, p2);

				map.enableScrollWheelZoom(true);
				  var myIcon = new BMap.Icon("http:///15037起点 (2).png", new BMap.Size(56,32 ));
					var point1 = new BMap.Point(113.533000,22.742986);
				var markerr = new BMap.Marker(point1, {
					icon:myIcon,
					enableDragging: true});
				map.addOverlay(markerr);
				markerr.addEventListener("dragend", function (e) {
				       console.log("111当前位置：" + e.point.lng + ", " + e.point.lat);
					   that.p1.lng=e.point.lng;
					   that.p1.lat= e.point.lat;
						// this.p1.lng=e.point.lng;
						// this.p1.lat=e.point.lat;
						//that.drive();
						
						// var pp1 = new BMap.Point(that.p1.lng,that.p1.lat);
    			  		// var pp2 = new BMap.Point(that.p2.lng,that.p2.lat);
				  		// console.log(pp1,pp2);
				 		// var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
						// console.log(driving);
    			   		// driving.search(pp1, pp2);
						// that.drivingg.clear();
				   });
				
		    },
			drive(){//此为规划路线方法
				//console.log(this.p1.lng,this.p1.lat);
				
				//  	let p1 = new BMap.Point(this.p1.lng,this,p1.lat);
    			//  let p2 = new BMap.Point(this.p2.lng,this,p2.lat);

    			//  let driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    			//  driving.search(p1, p2);
		},
		},
		mounted(){
		    this.initMap();
			this.$emit("getMsg", this.p1);
			this.$emit("getMsggg",this.p2);
		}
	}
</script>

<style lang="less" scoped>
	.dragList {overflow: auto;}
	.item {cursor: move;float: left;background: #fff;width:100px;height: 100px;line-height: 100px;text-align: center;margin:0 15px 15px 0;border: 1px solid #e6e6e6;}
	.dragList .sortable-ghost {
		opacity: 0.5;
	}
	.inputWideth{
		width: 191.2px;
		margin-right: 20px;
	}
	/deep/.el-input--small .el-input__inner {
		font-size: 16px;
		height: 36px;
	}
	.demonstration{
		font-size: 16px !important;
	}
</style>