vue引入vue-baidu-map,并获取选中点的详细信息

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//详细地址
			});

		},
	}
}

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值