1.npm 安装

$ npm install vue-baidu-map --save   //https://dafrok.github.io/vue-baidu-map/#/

2.main.js引入

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'lV6lw6NZhEQK0CFfT2DkIl4I7xxxxxx'   //自己的ak
})
<baidu-map :center="centerlist" :zoom="zoomlist" mapType="BMAP_NORMAL_MAP" style="height:1.6rem"
			 @click="getClickInfos" :scroll-wheel-zoom="true">
	<bm-marker :position="centerrlist" :dragging="true" @click="infoWindowOpens" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>//点击创建点
</baidu-map>
export default {
	data() {
		return {
			centerlist: {lng: 116.40,lat: 39.90},//中心点
			zoomlist: 10,//放大比例
			propprovince:'',//省
			propcity :'',//市
			propcounty :'',//县
			propaddress:'',//详细地址
		}
	},
	methods: {
		//地图点击事件
		getClickInfos(e) {
			console.log(e)
			let _this = this;
			this.longitude = e.point.lng;//经度
			this.latitude = e.point.lat;//维度
			this.centerrlist.lng = _this.longitude; //中心点
			this.centerrlist.lat = _this.latitude;//中心点
			let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
			geocoder.getLocation(e.point, function(rs) {
				console.log(rs)
				_this.propprovince = rs.addressComponents.province  //省
				_this.propcity = rs.addressComponents.city  //市
				_this.propcounty = rs.addressComponents.district //县
				_this.propaddress= rs.addressComponents.address//详细地址
			});

		},
	}
}

打印出的数据
获取点的数据
地址解析器获取的数据

Logo

前往低代码交流专区

更多推荐