up

src/views/content/addArticle.vue

@@ -91,8 +91,8 @@
             </bm-marker>
           </baidu-map> -->
           <el-input style="width:100%" v-model="keyword" placeholder="请输入关键词搜索"></el-input>
-          <p>点击地图添加标记</p>
-          <baidu-map @click="map" class="map bm-view" :center="point.lng||point.lat?point:'成都'" :zoom="15">
+          <p>点击地图添加标记  &nbsp;&nbsp; 当前标记地址：{{form.address}}</p>
+          <baidu-map @click="getClickInfo"   @ready="onBaiduMapReady" class="map bm-view" :center="point.lng||point.lat?point:'成都'" :zoom="15" :scroll-wheel-zoom="true">
             <bm-view style="width: 100%; height:300px;"></bm-view>
             <bm-marker  :position="point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
             </bm-marker>
@@ -133,7 +133,8 @@ export default {
       point:{
         lng:'',
         lat:''
-      }
+      },
+      BMap:null
     };
   },
   methods: {
@@ -202,9 +203,42 @@ export default {
         });
       }
     },
-    map(type,target){
-        this.point=type.point
-    }
+    onBaiduMapReady(e) {
+      const that = this
+      this.BMap = e.BMap
+    },
+     getClickInfo(e) {
+      // 调整地图中心位置
+      this.point=e.point
+
+      // 此时已经可以获取到BMap类
+      if (this.BMap) {
+        const that = this
+        // Geocoder() 类进行地址解析
+        // 创建地址解析器的实例
+        const geoCoder = new this.BMap.Geocoder()
+        // getLocation() 类--利用坐标获取地址的详细信息
+        // getPoint() 类--获取位置对应的坐标
+        geoCoder.getLocation(e.point, function(res) {
+          const addrComponent = res.addressComponents
+          const surroundingPois = res.surroundingPois
+          const province = addrComponent.province
+          const city = addrComponent.city
+          const district = addrComponent.district
+          let addr = addrComponent.street
+          if (surroundingPois.length > 0 && surroundingPois[0].title) {
+            if (addr) {
+              addr += `-${surroundingPois[0].title}`
+            } else {
+              addr += `${surroundingPois[0].title}`
+            }
+          } else {
+            addr += addrComponent.streetNumber
+          }
+          that.form.address=province+city+district+addr
+        })
+      }
+    },
   },
   created() {
     this.getContent()