elementUI输入框/选项卡与百度地图联动

输入框/选项卡与百度地图联动

示例

html部分

<template><el-form ref="Froms" :model="formData" label-width="120px"><el-form-item label="经营地区:" prop="businessArea"><v-region-group:town="false"v-model="regionArea"@change="regionChange"></v-region-group></el-form-item><el-form-item label="详细地址:" prop="shopAddrExt"><el-input v-model="formData.shopAddrExt" placeholder="请输入详细地址" size="small" @input="inputShopAddr" /><div class="map"><baidu-map @ready="initMap"@click="getLocation":center="center"class="map":zoom="zoom":scroll-wheel-zoom="true"><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" /></baidu-map></div></el-form-item></el-form>
</template><script>export default {data(){return{formData: {shopAddrExt: ''},regionArea: {}, // 所选区域center: { lng: 0, lat: 0 }, // 坐标centerPoint: {},zoom: 3, BMap: null,map: null,geoCoder: null // 地址解析器}},methods: {initMap({ 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); // 创建点坐标})// 监听地图缩放结束事件 lng表示经度，lat表示纬度(处理百度地图放大之后中心点偏移问题)this.map.addEventListener('zoomend', (e)=> {this.map.centerAndZoom(new BMap.Point(this.center.lng, this.center.lat),this.map.getZoom(););});// enableMapClick:false 表示禁止地图内景点信息点击// this.map = new BMap.Map('baiduMap', { enableMapClick: false });// 设置地图允许的最大最小级别// this.map.setMinZoom(5);// this.map.setMaxZoom(20);// 开启鼠标滚轮缩放// this.map.enableScrollWheelZoom(true);},// 设置显示中心点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){// 创建自定义标记 参数:自定义图片路径 大小 偏移量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);// 创建点坐标})},// 选择经营地区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.inputShopAddr(this.formData.businessArea);}}}
</script>

用到的插件

// v-region插件
npm i v-region
// 百度地图
npm install vue-baidu-map --save

main.js

// v-region插件
import Region from 'v-region'
Vue.use(Region);// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {ak: '************************************'
})