需求：在地图上点选或搜索选中后将经纬度和详细地址传给表单：如下
1.点击地图选择地址，效果
2.搜索后点击选择地址，效果
核心代码：
<!-- 地图拾取经纬度 --><template><div class="map-address"><div id="mapDiv"></div><div class="left-top"><el-inputv-model="input"placeholder="请输入关键词搜索"class="address-search"@input="searchWithName"><el-button size="mini" @click="confirm" slot="append">确认选中</el-button></el-input><div class="address-list" v-show="addressList && addressList.length"><divv-for="(item, index) in addressList":key="index"@click="selectOneAddr(item.address + item.name)"><div>{{ item.address }}</div><div>{{ item.name }}</div></div></div></div></div></template><script>export default {components: {},data() {return {lng: 0,lat: 0,address: "",marker: {},input: "",map: {},addressList: [],};},computed: {},watch: {input(val) {if (!val) {this.addressList = [];// 用来清空删除太快时候出现列表的bugsetTimeout(() => {this.addressList = [];}, 3000);}},},methods: {confirm() {if (this.lng && this.lat && this.address) {this.$emit("closeMapaddressDialog", false);} else {this.$message.warning("鼠标点选或搜索选中地址后再进行确认");}},// 搜索 天地图LocalSearchsearchWithName(val) {if (val) {let that = this;var config = {pageCapacity: 10, //每页显示的数量onSearchComplete: localSearchResult, //接收数据的回调函数};//创建搜索对象let localsearch = new T.LocalSearch(that.map, config);localsearch.search(that.input, 5);function localSearchResult(result) {//清空地图及搜索列表clearAll();//解析建议词信息suggests(result.getSuggests());}//解析建议词信息function suggests(obj) {if (obj && obj.length) {//建议词提示，如果搜索类型为公交规划建议词或公交站搜索时，返回结果为公交信息的建议词。console.log(obj);that.addressList = obj;}}//清空地图及搜索列表function clearAll() {that.map.clearOverLays();}} else {this.addressList = [];}},// 初始化地图initMap() {var map;var zoom = 12;map = new T.Map("mapDiv", {projection: "EPSG:4326",});map.centerAndZoom(new T.LngLat(113.631708, 34.752861), zoom);this.map = map;//创建对象let geocode = new T.Geocoder();// 鼠标点击逆地理搜索map.addEventListener("click", function (e) {geocode.getLocation(e.lnglat, searchResult);});let that = this;function searchResult(result) {if (result.getStatus() == 0) {// console.log(result.getAddress());that.address = result.getAddress();that.$emit("setAddress", that.address);let label = new T.Label({text: that.address,position: that.marker.getLngLat(),offset: new T.Point(10, -20),});map.addOverLay(label);} else {map.clearOverLays();console.log(result.getMsg());}}var cp = new T.CoordinatePickup(map, { callback: getLngLat });cp.addEvent();function getLngLat(lnglat) {map.clearOverLays();// console.log("这是lnglat.lng.toFixed(6) ", lnglat.lng.toFixed(6));// console.log("这是lnglat.lat.toFixed(6)", lnglat.lat.toFixed(6));that.lng = lnglat.lng.toFixed(6);that.lat = lnglat.lat.toFixed(6);that.$emit("setPosition", [that.lng, that.lat]);that.marker = new T.Marker(new T.LngLat(that.lng, that.lat)); // 创建点map.addOverLay(that.marker);}},selectOneAddr(val) {let that = this;that.map.clearOverLays();//创建对象let geocoder = new T.Geocoder();geocoder.getPoint(val, searchResult);function searchResult(result) {if (result.getStatus() == 0) {that.map.panTo(result.getLocationPoint(), 16);//创建标注对象var marker = new T.Marker(result.getLocationPoint());//向地图上添加标注let label = new T.Label({text: val,position: result.getLocationPoint(),offset: new T.Point(10, -20),});that.map.addOverLay(label);that.map.addOverLay(marker);that.address = val;that.$emit("setAddress", val);that.lng = result.getLocationPoint().lng;that.lat = result.getLocationPoint().lat;that.$emit("setPosition", [result.getLocationPoint().lng,result.getLocationPoint().lat,]);} else {this.$message.warning("定位出错请重新选择");}}},},//生命周期 - 创建完成（可以访问当前this实例）created() {},//生命周期 - 挂载完成（可以访问DOM元素）mounted() {this.initMap();},beforeCreate() {},beforeMount() {},beforeUpdate() {},updated() {},beforeDestroy() {},destroyed() {},//如果页面有keep-alive缓存功能，这个函数会触发activated() {},};</script><style lang='stylus' scoped>.cur {cursor: pointer;}.map-address {height: 60vh;}#mapDiv {height: 100%;position: relative;}.left-top {position: absolute;left: 55px;top: 120px;display: flex;flex-direction: column;}.address-search {width: 20vw;z-index: 10000;margin-bottom: 20px;}.address-list {display: flex;flex-direction: column;z-index: 10000;background-color: #fff;padding: 10px;min-width: 18vw;border: 1px solid #DCDFE6;>div {display: flex;align-items: center;height: 30px;cursor: pointer;color: #409eff;&:hover {background-color: #eee;}}}</style><style>.address-search .el-input-group__append,.el-input-group__prepend {background-color: #409eff;color: #fff;}</style>
父弹窗
<el-dialogv-if="dialogMapAddress":close-on-click-modal="false"title="地图选址"width="90%"center:visible.sync="dialogMapAddress"><MapAddress@setPosition="setPosition"@setAddress="setAddress"@closeMapaddressDialog="closeMapaddressDialog"></MapAddress></el-dialog>
事件：
closeMapaddressDialog(){this.dialogMapAddress=false},// 获取详细地址setAddress(val) {// console.log("这是 获取详细地址 val", val);if (val) {this.ruleFormEdit.rctmads = val;} else {this.$message.warning("未定位到详细地址请手动输入");}},// 获取经纬度setPosition(val) {// console.log("这是 获取经纬度 val", val);if (val.length && val.length == 2) {this.ruleFormEdit.x = val[0];this.ruleFormEdit.y = val[1];}else{this.$message.warning("未定位到经纬度坐标请手动输入");}},openMapAddressDialog() {console.log("这是地图选址弹窗组件打开");this.dialogMapAddress = true;},
如果觉得《天地图api-地址选择-获取经纬度和详细地址》对你有帮助，请点赞、收藏，并留下你的观点哦！
