消息类型地图，表情

project/pidu/app/AppSessionArchive/components/Detail.vue

@@ -12,7 +12,7 @@
         <div class="addressBook-left__list--title">
           <el-input
             size="mini"
-            :placeholder="tabIndex == 1 ? '请输入群聊名称' : '请输入联系人姓名'"
+            :placeholder="tabIndex == 1 ? '请输入群名称' : '请输入昵称'"
             v-model="searchName"
             clearable
             @clear="current = 1, searchName = '', getListInit()"
@@ -108,6 +108,15 @@
 
               <img :src="item.sdkFileUrl" alt="" v-if="item.msgType == 'emotion'" :style="[{width: item.width+'px'}, {height: item.height+'px'}]">
 
+              <div class="map-info" v-if="item.msgType == 'location'">
+                <div :id="`map${index}`" class="map-content"></div>
+                <div class="address-text">
+                  <p>{{item.title}}</p>
+                  <p>{{item.address}}</p>
+                </div>
+              </div>
+              
+
 
 
               <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == id">
@@ -128,8 +137,10 @@
 <script>
   import { mapState } from 'vuex'
   import Viewer from 'v-viewer'
+  import AMapLoader from '@amap/amap-jsapi-loader'
   import Vue from 'vue'
   Vue.use(Viewer);
+  
   export default {
     name: 'Detail',
     props: {
@@ -161,7 +172,9 @@
           {name: '文件', value: 'file'},
         ],
         searchMsg: '',
-        id: 'LiuYe'
+        id: 'LiuYe',
+        map: null,
+        AMap: null
       }
     },
     computed: {
@@ -227,10 +240,25 @@
           }
         }).then(res => {
           if (res.code === 0) {
-            res.data.records.map((item) => {
+            res.data.records.map((item, index) => {
               if(item.msgType == 'file') {
                 item.files = [{url: item.sdkFileUrl, accessUrl: item.sdkFileUrl, name: item.sdkFileName, fileSizeStr: item.fileSizeStr}]
               }
+
+              if(item.msgType == 'location') {
+                // const {AMap, map} = this
+                // item.map = null
+                // this.$load(item.map).then(() => {
+                //   // const marker = new AMap.Marker({
+                //   //   position: new AMap.LngLat(item.lng, item.lat),
+                //   //   title: item.address
+                //   // })
+                //   // item.map.add(marker)
+                //   item.map.setZoomAndCenter(item.zoom, [item.lng, item.lat], false, 600)
+                //   // item.map.setFitView()
+                // })
+                this.initMap(item.lng, item.lat, item.zoom, index)
+              }
             })
             this.msgList = res.data.records
             this.msgTotal = res.data.total || 0
@@ -243,6 +271,19 @@
           this.isLoading = false
         })
       },
+      initMap(lng, lat, zoom, index) {
+        AMapLoader.load({
+          key: '54a02a43d9828a8f9cd4f26fe281e74e',
+          version: '2.0',
+        }).then((AMap) => {
+          this.map = new AMap.Map(`map${index}`, {
+            resizeEnable: true,
+            zooms: [6, 20],
+            center: [lng, lat],
+            zoom: zoom,
+          })
+        })
+      },
       typeClick(index) {
         this.tabIndex = index
         this.msgType = 0
@@ -545,6 +586,30 @@
               border-top: 1px solid #eee;
             }
           }
+          .map-info {
+            width: 600px;
+            height: 400px;
+            position: relative;
+            .map-content {
+              width: 600px;
+              height: 400px;
+            }
+            .address-text {
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              z-index: 9999;
+              width: 600px;
+              background-color: rgba(0, 0, 0, .7);
+              p {
+                color: #fff;
+                line-height: 34px;
+                font-size: 16px;
+                padding-left: 16px;
+                word-break: break-all;
+              }
+            }
+          }
         }
       }
       .item-left {