update BdMap.vue

src/views/home/BdMap.vue

@@ -2,10 +2,12 @@
   <div>
     <label>
       <el-select v-model="form" placeholder="选择标签" @change="onChange">
+        <el-option label="全部" value="0" />
         <el-option label="分类1" value="1" />
         <el-option label="分类2" value="2" />
         <el-option label="分类3" value="3" />
         <el-option label="分类4" value="4" />
+        <el-option label="分类5" value="5" />
       </el-select>
     </label>
     <!-- zoom=7 的比例尺为 100km   -->
@@ -25,10 +27,10 @@
         v-for="(item,index) in markers"
         :key="index"
         :position="item.position"
-        @click="getPoint(item)"
+        @click="getMarkerInfoWrapper(item)"
       >
         <bm-label
-          :content="item.extra"
+          :content="item.title"
           :label-style="{color: 'blue', fontSize : '12px'}"
           :offset="{width: 0, height: 0}"
         />
@@ -47,7 +49,7 @@
         <div slot="header" class="clearfix">
           <el-button
             type="text"
-            v-clipboard:copy="markerPosition.lat + ' ' + markerPosition.lng"
+            v-clipboard:copy="earthPoint.lat + ' ' + earthPoint.lng"
             v-clipboard:success="onCopy"
             v-clipboard:error="onCopyError"
           >GoogleEarth 坐标</el-button>
@@ -60,10 +62,14 @@
           </label>
           <br>
           <label>
-            评论 <span style="color: blue" v-text="markerInfo.replyContent"/>
+            SKU <span v-text="markerInfo.sku"/>
           </label>
-<!--          <br>
+          <br>
           <label>
+            评论 <span style="color: blue" v-text="markerInfo.replyContent"/>
+          </label>
+          <br>
+<!--          <label v-if="markerInfo.appendContent !== undefined || markerInfo.appendContent !== null">
             追加 <span style="color: blue" v-text="markerInfo.appendContent"/>
           </label>-->
         </div>
@@ -91,20 +97,21 @@ export default {
     return {
       BMap: null,
       markers: [],
-      mapCenter: { title: '武汉', lng: 114.322493, lat: 30.586445 },
+      mapCenter: { title: '武汉', lng: 114.0000, lat: 30.0000 },
       showMarkerDialog: false,
       markerInfo: {
         itemId: null,
+        sku: null,
         replyId: null,
         replyContent: null,
         appendContent: null,
         photoUrl: null
       },
-      markerPosition: {
+      earthPoint: {
         lat: null,
         lng: null
       },
-      form: 1,
+      form: 0,
     }
   },
   created() {
@@ -123,22 +130,21 @@ export default {
           // console.log('返回详细地址和经纬度', res)
           const { lng, lat } = res.point
           const { province, city, district, street, street_number } = res.address
-
-          that.center = { lng, lat }
           that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
         })
 
-        const type = 1
+        const type = 0
         this.getMapMarkersWrapper(type)
       }
     },
     getMapMarkersWrapper(type) {
+      this.markers = []
       getMapMarkers(type).then(res => {
         if (res.code === 0) {
           this.$notify({
             message: '加载了 ' + res.data.length + ' 条数据',
             type: 'warning',
-            duration: 3000
+            duration: 5000
           })
           this.markers = res.data
         } else {
@@ -157,11 +163,6 @@ export default {
       })
     },
     getClickInfo(e) {
-      //console.log(e)
-      // 调整地图中心位置
-      this.center.lng = 104.066
-      this.center.lat = 30.666
-
       // 此时已经可以获取到BMap类
       if (this.BMap) {
         const that = this
@@ -171,8 +172,6 @@ export default {
         // getLocation() 类--利用坐标获取地址的详细信息
         // getPoint() 类--获取位置对应的坐标
         geoCoder.getLocation(e.point, function(res) {
-          // console.log('获取经纬度', e.point, '获取详细地址', res)
-
           const lng = e.point.lng
           const lat = e.point.lat
           const addrComponent = res.addressComponents
@@ -196,10 +195,20 @@ export default {
         })
       }
     },
-    getPoint(item) {
-      this.markerPosition = item.position
+    getMarkerInfoWrapper(item) {
+      this.earthPoint = item.position
       this.showMarkerDialog = true
+      console.log(item)
       getMarkerInfo(item.id).then(res => {
+        this.markerInfo = {
+          itemId: null,
+          sku: null,
+          replyId: null,
+          replyContent: null,
+          appendContent: null,
+          photoUrl: null
+        }
+
         if (res.code === 0) {
           this.markerInfo = res.data
         } else {
@@ -211,7 +220,7 @@ export default {
     },
     handleDialogClose(done) {
       this.showMarkerDialog = false
-      this.markerPosition = { lat: null, lng: null }
+      this.earthPoint = { lat: null, lng: null }
       done()
     },
     onCopy(e) {