地图安装看这个/Iphone886/article/details/127976856?ops_request_misc=&request_id=&biz_id=102&utm_term=vue2%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E4%BD%BF%E7%94%A8&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-127976856.142^v68^control,201^v4^add_ask,213^v2^t3_esquery_v1&spm=1018.2226.3001.4187
1，搜索任意地址
2，弹出经，纬度，地址。
3，保存后。F12，打印出经，纬度地址。
4，点击地图任意点。查出经，纬度，地址。
上代码。
index.vue
<template><el-container><el-dialog width="60%" :visible.sync="mapVisible" append-to-body><baidu-map style="display:flex;flex-direction: column-reverse;" class="bm-view" @ready="mapReady"@click="getLocation" :scroll-wheel-zoom="true"><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation><bm-marker v-if="infoWindowShow" :position="{lng: form.lng, lat: form.lat}"></bm-marker><bm-info-window :position="{lng: form.lng, lat: form.lat}" :show="infoWindowShow"@clickclose="infoWindowClose"><p>当前位置:{{form.address}}</p><p>经度:{{form.lng}}</p><p>纬度:{{form.lat}}</p></bm-info-window><div style="margin-bottom: 10px;"><bm-auto-complete v-model="form.address" :sugStyle="{zIndex: 999999}"><el-input v-model="form.address" style="width:300px;margin-right:15px" placeholder="输入地址"clearable></el-input></bm-auto-complete><el-button type="primary" @click="getBaiduMapPoint">搜索</el-button><el-button type="primary" @click="closeMap()">保存</el-button></div></baidu-map></el-dialog></el-container></template><script>export default {data() {return {lng: "", //经度lat: "", //纬度address: "", //详细地址infoWindowShow: false, //地图详细地址显示mapVisible: false, //百度地图弹框}</script>methods: {//百度地图初始化mapReady({BMap,map}) {// 默认经纬度作为中心点this.point = new BMap.Point(116.393541, 39.902292);map.centerAndZoom(this.point, 15);this.BMap = BMapthis.map = map},//点击获取经纬度getLocation(e) {this.form.lng = e.point.lng //经度this.form.lat = e.point.lat //纬度console.log(e.point.lng)console.log(e.point.lat)var point = new BMap.Point(e.point.lng, e.point.lat);var gc = new BMap.Geocoder();let _this = this;gc.getLocation(point, function(rs) {//地址信息_this.form.address = rs.address;});this.infoWindowShow = true},getBaiduMapPoint() {let that = thislet myGeo = new this.BMap.Geocoder()myGeo.getPoint(this.form.address, function(point) {if (point.lng != '116.413384') {that.map.centerAndZoom(point, 15)that.form.lng = point.lng //经度that.form.lat = point.lat //纬度that.infoWindowShow = true} else {that.$message({message: "请选择正确地址！！!",type: "warning",});this.infoWindowShow = false}})},//百度地图信息窗口关闭infoWindowClose() {this.form.lng = ""; //经度this.form.lat = ""; //纬度this.form.address = ""; //详细地址this.infoWindowShow = false;},//弹出百度地图addMap() {this.infoWindowShow = false;this.mapVisible = true;},//关闭地图closeMap() {console.log(this.form.lng);console.log(this.form.lat);console.log(this.form.address);this.mapVisible = false; //关闭弹窗},}
有问题，请留言。
或2297660550@联系我
