<style> .mapContent .googleMap { width: 800px; height: 350px; margin-top: 10px; } .mapContent .searchInput { border-radius: 17px; height: 34px; width: 250px; border: 1px solid #dcdfe6; outline: none; padding-left: 20px; margin: 3px 0 0 200px; } .mapContent .btnList { margin: 25px 0 0 auto; text-align: center; } .mapContent .sureBtn { margin-left: 20px; } .mapContent .mainContent { position: relative; } .mapContent .searchList { position: absolute; top: 10px; left: 0; z-index: 999; } </style> <template> <div class="mapContent"> <div class="mainContent"> <div class="searchList"> <input type="text" class="searchInput" id="address_all" v-model="QAddress" placeholder="输入地址按回车键查询"/> </div> <div class="googleMap" id="MapContent"> </div> </div> <div class="btnList"> <input type="button" class="normalBtn sureBtn" value="确定" @click="sendMsg"/> <input type="button" class="hollowFixedBtn" value="取消" @click="closeDialog"/> </div> </div> </template> <script> export default { props: ["address"], data() { return { dataList: { lat: "", lng: "", address: "", country: "0", province: "0", city: "0" }, isdisable: false, QAddress: this.address }; }, methods: { getList(obj) { this.isdisable = true; this.dataList.lat = obj.lat; this.dataList.lng = obj.lng; this.dataList.address = obj.address; var that = this; if (obj.areaArray != null && obj.areaArray.length > 0) { var q_msg = { area: JSON.stringify(obj.areaArray) }; that.apipost( "dict_get_Destination_GetListByNames", q_msg, res => { if (res.data.resultCode == 1) { res.data.data.forEach(areaItem => { switch (areaItem.CodeLevel) { case 1: this.dataList.country = areaItem.ID; break; case 2: this.dataList.province = areaItem.ID; break; case 3: this.dataList.city = areaItem.ID; break; } }); } }, null ); } this.$emit("headCallBack", this.dataList); }, closeDialog() { this.$emit("refList"); }, sendMsg() { if (!this.isdisable) { this.tips("请点击选择地址", "info"); } else { this.$emit("headCallBack", this.dataList); this.$emit("refList"); } }, tips(msg, type) { this.$message({ message: msg, duration: 2000, type: type }); } }, created() {}, mounted() { this.$googleMap.init( this.getList, this.QAddress, this.domainManager().GoogleMapImageUrl ); } }; </script>