address.vue
<template><div><!-- 地图 --><el-drawer:visible.sync="type1"direction="rtl"size="50%"append-to-bodyclass="map-drawer":before-close="beforeClose"><div style="width: 100%;height: 100%;"><div slot="title" class="title_info_weight">选择地点</div><el-inputplaceholder="请输入关键字"suffix-icon="el-icon-search"v-model="keyword"style="z-index: 10;top: 10px;position: absolute;left: 16px;width: 350px;"></el-input><baidu-mapclass="bm-view":center="mapData.center":zoom="mapData.zoom"@ready="mapHandler"@click="getLocation":scroll-wheel-zoom="true"><bm-local-search:keyword="keyword":auto-viewport="true":location="location":panel="false"style="display: none"@searchcomplete="onSearchComplete"@infohtmlset="onInfohtmlset"@markersset="onMarkersset"></bm-local-search><!-- 点击加点 --><!-- <bm-marker :position="{ lng: longitude, lat: latitude }"></bm-marker> --><!-- 弹框 --><bm-info-window:position="{ lng: longitude, lat: latitude }":show="infoWindowShow"title="请选择详细位置"@clickclose="infoWindowClose"><divv-for="(item, index) in surroundingPois":key="index":class="{ activeColor: colorIndex === index }"@click="pointcheck(item, index)"><p style="line-height: 1.2; font-size: 14px">{{ item.title }}</p></div><divv-if="surroundingPois.length == 0"style="line-height: 1.2; font-size: 14px">{{ address.addressStr }}</div></bm-info-window></baidu-map></div><div class="avue-dialog__footer"><el-button @click="type1 = false">取 消</el-button><el-button @click="onSure" type="primary">确 定</el-button></div></el-drawer></div>
</template><script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'// 下拉框全局组件样式export default {data() {return {//地图mamParams: {Zoom: 12},mapFrom: [98.490276, 25.020283],//地图数据colorIndex: -1,mapData: {center: { lng: 0, lat: 0 },zoom: 13,},BMap: null, //BMap类map: null, //地图对象mk: "", //Marker实例address: {lng: 0, //经度lat: 0, //纬度addressStr: "",title: "",province: "", // 省city: "", // 市district: "", // 区},location: "腾冲", //检索城市type1: false,latitude: "",longitude: "",surroundingPois: [], //选中位置周围数据infoWindowShow: false,//控制地图信息窗口显示keyword:"",}},methods:{//返回goBack() {this.$router.$avueRouter.closeTag();window.history.back();},// 点击选择地址onChangeCity() {this.$refs.cityRef.blur()this.type1 = true},//标注气泡内容创建后的回调函数获取气泡内的信息onInfohtmlset(res) {console.log('res', res)this.longitude = res.point.lng;this.latitude = res.point.lat;this.infoWindowShow = false;// this.address.region = res.province + res.city;this.eventManList.gisx = res.point.lng;this.eventManList.gisy = res.point.lat;this.address.addressStr = res.address;},onMarkersset(res) {//标注添加完成后的回调函数this.infoWindowShow = false;},//直接选点，展示附近点位getLocation(e) {this.colorIndex = -1;if (e.overlay) {this.infoWindowShow = false;} else {this.infoWindowShow = true;}this.longitude = e.point.lng;this.latitude = e.point.lat;const myGeo = new BMap.Geocoder(); // 创建地址解析器的实例myGeo.getLocation(e.point, (rs) => {this.surroundingPois = rs.surroundingPois;let adr = rs.addressComponents;// this.address.region = adr.province + adr.city + adr.district+adr.street+adr.streetNumber; // 省市区街道门牌号if (rs.surroundingPois.length == 0) {this.address.addressStr = rs.address;}});},//选择点位pointcheck(e, index) {this.colorIndex = index;this.address.addressStr = e.address;},//信息窗口关闭infoWindowClose() {this.latitude = "";this.longitude = "";this.infoWindowShow = false;},//地图确定按钮onSure() {this.infoWindowShow = falselet data = [this.longitude, this.latitude, this.address.addressStr]this.type1 = false;this.$emit('onSure', data)},//地图初始化mapHandler({ BMap, map }) {this.map = map;this.BMap = BMap;this.mapData.center.lng = 98.497291;this.mapData.center.lat = 25.01757;this.mapData.zoom = 18;},onSearchComplete(res) {// 地图搜索回调this.infoWindowShow = false;},beforeClose(done) {this.keyword = "";this.infoWindowShow = false;// this.map.removeOverlay()done();},},created() {},mounted() {}
}
</script><style scoped></style>
<style lang="css" scoped>
::v-deep .el-button--small, .el-button--small.is-round {display: none;
}::v-deep .el-form-item__content {line-height: 40px;position: relative;font-size: 14px;margin-left: 128px;
}
.avue-form{width: auto !important;margin: 0 !important;
}
.avue-form
::v-deep .el-form-item__content {line-height: 40px;position: relative;font-size: 14px;margin-left: 0px !important;
}
.avue-form
::v-deep .el-col {margin-bottom: 0 !important;
}
.bm-view {width: 100%;height: 90%;
}
.activeColor {color: #0060ff !important;
}
</style>
main.js
封装成了一个组件
