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/
·
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//详细地址
});
},
}
}
打印出的数据
更多推荐
已为社区贡献3条内容
所有评论(0)