vue百度地图的和element输入框/v-region的联动

第一步：安装插件

npm install vue-baidu-map --save

第二步：main.js中引用

// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {ak: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})

第三步：页面中使用

<template>
<div><el-form ref="Froms" :model="formData" :rules="rules" label-width="120px"><el-form-item label="详细地址:" prop="shopAddrExt"><el-input v-model="formData.shopAddrExt" placeholder="请输入详细地址" size="small" @input="inputShopAddr" /><div class="map"><baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="initMap" @click="getLocation"><!-- 缩放 --><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" /></baidu-map></div></el-form-item><el-form-item label="经营地区:" prop="businessArea"><!-- 要安装v-region --><v-region-group:town="false"v-model="regionArea"@change="regionChange"></v-region-group></el-form></div>
</template>
<script>
export default {data () {return {formData: {shopAddrExt: '', businessArea: ''},center: {lng: 0, lat: 0},zoom: 10,BMap: null,map: null,rules:{},regionArea: {}}},methods: {// 初始化initMap ({BMap, map}) {console.log(BMap, map)this.zoom = 15;this.BMap = BMap;this.map = map;this.geoCoder = new BMap.Geocoder(); // 创建地址解析器的实例let geolocation = new BMap.Geolocation(); // 获取当前经纬度用作地图显示中心点geolocation.getCurrentPosition((e)=>{console.log(e);this.center.lng = e.longitude;this.center.lat = e.latitude;this.setCenterZoom(e); // e获取到经纬度设置地图中心点this.setIcon(e); // 创建点坐标}// zoomend：监听地图缩放结束事件 lng表示经度，lat表示纬度(处理百度地图放大之后中心点偏移问题)// zoomstart：还有一个监听地图缩放开始事件用法和zoomend一样this.map.addEventListener('zoomend', (e)=> {this.map.centerAndZoom(new BMap.Point(this.center.lng, this.center.lat),this.map.getZoom());});},// 设置显示中心点setCenterZoom(e){this.center.lng = e.longitude;this.center.lat = e.latitude;this.centerPoint = new BMap.Point(e.longitude, e.latitude); // 选择一个经纬度作为中心点this.map.centerAndZoom(this.centerPoint, 14); // 设置地图中心点和缩放级别},// 创建点坐标setIcon(latLng){// 创建自定义标记 参数:自定义图片路径 大小 偏移量(！！！注意：如果这里icon不显示请检查图片大小是否和下面配置的new BMap.size一致)const icon = new BMap.Icon(require('../../../../../static/icon/position4.png'),new BMap.Size(32, 32),// { anchor: new BMap.Size(0, 0) })// 生成自定义图标点// 创建点const point = new BMap.Point(latLng.longitude, latLng.latitude);// 创建标注const marker = new BMap.Marker(point, { icon: icon });this.map.clearOverlays(); // 先删除this.map.addOverlay(marker);// 将标注添加到地图中// 给标记点添加点击事件marker.addEventListener('click', (e) => {// 执行想进行的操作(经个人测试在此处注册点击事件效果最佳, 该有的数据项都可以获取)console.log(e)})},// 获取地图点击的地址getLocation(e){// console.log(e.point)let latLng = {longitude: e.point.lng,latitude: e.point.lat}this.setCenterZoom(latLng);// 更改地图显示中心点this.setIcon(latLng);// 创建点坐标this.geoCoder.getLocation(e.point, (rs) => {// console.log(rs.surroundingPois) // 附近的POI点(array) // console.log(rs.business) // 商圈字段let adr = rs.addressComponents;let address = adr.province + adr.city + adr.district + adr.street + adr.streetNumber; // 省市区街道门牌号this.formData.shopAddrExt = address; // 给input框赋值})},// 根据输入的地址定位获取当前经纬度/根据当前地址获取经纬度inputShopAddr(inputValue){this.geoCoder.getPoint(inputValue, (point) => {let latLng = {longitude: point.lng,latitude: point.lat}this.setCenterZoom(latLng);// 更改地图显示中心点this.setIcon(latLng);// 创建点坐标})},///// 这里我还用了中国行政区划选择器v-region和地图的联动regionChange (data) {console.log(data)let province = data.province ? data.province.value : '';let city = data.city ? data.city.value : '';let area = data.area ? data.area.value : '';this.formData.businessArea = province + city + area;this.formData.shopProvinceId = data.province ? data.province.key : '';this.formData.shopCityId = data.city ? data.city.key : '';this.formData.shopCountryId = data.area ? data.area.key : '';this.inputShopAddr(this.formData.businessArea);}
}
</script>
<style>.map{width: 430px;height: 280px;}.BMap_cpyCtrl,.BMap_noprint {display: none;}.BMap_cpyCtrl,.anchorBL {inset: auto auto 0px 1px !important;}
</style>