update

src/views/place/category/DialogForm.vue

@@ -9,18 +9,33 @@
       <el-row :gutter="16">
         <el-col :span="12">
           <el-form-item label="物务类型名称">
-            <el-input v-model="form.name" />
+            <el-input v-model="form.name"/>
+          </el-form-item>
+
+          <el-form-item label="排序">
+            <el-input-number v-model="form.sortNumber" :min="0"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="排序">
-            <el-input-number v-model="form.sortNumber" :min="0" />
+          <el-form-item label="ICON图标">
+            <el-upload
+              :show-file-list="false"
+              action="#"
+              list-type="picture-card"
+              name="fileData"
+              :http-request="uploaderHandle"
+              :on-success="uploadSuccessIconImage"
+              :auto-upload="true"
+            >
+              <el-image v-if="iconImage" :src="iconImage" class="image"/>
+              <i v-else class="el-icon-plus avatar-uploader-icon"/>
+            </el-upload>
           </el-form-item>
         </el-col>
       </el-row>
 
       <el-form-item label="备注说明">
-        <el-input v-model="form.remark" type="textarea" rows="5" />
+        <el-input v-model="form.remark" type="textarea" rows="5"/>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
@@ -30,9 +45,17 @@
   </el-dialog>
 </template>
 
+<style type="text/css">
+.image {
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+}
+</style>
 <script>
 
 import { save, updateById } from '@/api/place/category'
+import { uploaderHandle } from '@/api/statistics/upload'
 
 export default {
   data() {
@@ -40,9 +63,7 @@ export default {
       visible: false,
       isLoading: false,
       form: {},
-      businessLicense: null,
-      legalPersonIdCardA: null,
-      legalPersonIdCardB: null,
+      iconImage: null,
       lng: null,
       lat: null
     }
@@ -50,6 +71,10 @@ export default {
   mounted() {
   },
   methods: {
+    uploaderHandle,
+    uploadSuccessIconImage(res) {
+      this.iconImage = res.url
+    },
     open(data) {
       this.visible = true
       this.isLoading = false
@@ -58,9 +83,7 @@ export default {
       if (data && data.id) {
         this.lat = data.lat
         this.lng = data.lng
-        this.businessLicense = data.businessLicense
-        this.legalPersonIdCardB = data.legalPersonIdCardB
-        this.legalPersonIdCardA = data.legalPersonIdCardA
+        this.iconImage = data.iconImage
       }
       this.form = Object.assign({}, data)
     },
@@ -75,9 +98,7 @@ export default {
         ...this.form,
         'lng': this.lng,
         'lat': this.lat,
-        'businessLicense': this.businessLicense,
-        'legalPersonIdCardB': this.legalPersonIdCardB,
-        'legalPersonIdCardA': this.legalPersonIdCardA
+        'iconImage': this.iconImage
       }
       console.log(param)
       if (this.form.id) {

src/views/place/gis/index.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="app-container">
-    <tencent-map id="amapcontainer" :height="900" :enable-click="false" :enable-bounds-changed="true" @boundsChanged="boundsChanged" />
+    <tencent-map id="amapcontainer" :height="900" :enable-click="false" :enable-bounds-changed="true" @boundsChanged="boundsChanged"/>
     <div class="category">
       <el-card>
         <a v-for="d in listData" :key="d.category.id" href="javascript:;" @click="changeDataType(d.category.id)">
           <el-row>
-            <el-col :span="18">
+            <el-col :span="4">
+              <el-image :src="d.category.iconImage" style="height: 20px"/>
+            </el-col>
+            <el-col :span="14">
               {{ d.category.name }}
             </el-col>
             <el-col :span="6">
@@ -30,6 +33,16 @@
   display: block;
   padding: 10px 0;
 }
+
+.marker span {
+  color: #666666;
+  margin-right: 10px;
+  font-size: 12px
+}
+.marker p{
+  font-size: 16px;
+  margin: 5px 0;
+}
 </style>
 
 <script>
@@ -74,19 +87,33 @@ export default {
     },
     setMarker: function(res) {
       const listGeometries = []
+      const listStyles = {}
+
       res.forEach((o) => {
-        let infoContent = '<div style="text-align: left">'
-        infoContent += '<p>名称：' + (o.name ?? '-') + '</p>'
-        infoContent += '<p>联系人：' + (o.contacts ?? '-') + '</p>'
-        infoContent += '<p>电话：' + (o.contactNumber ?? '-') + '</p>'
+        let infoContent = '<div style="text-align: left" class="marker">'
+        infoContent += '<p><img src="' + o.litpic + '" width="200" height="150"/></p>'
+        infoContent += '<p>' + (o.name ?? '-') + '</p>'
+        infoContent += '<p><span>联系人</span>' + (o.contacts ?? '-') + '</p>'
+        infoContent += '<p><span>电话</span>' + (o.contactNumber ?? '-') + '</p>'
         infoContent += '</div>'
+        const styleKey = 'myStyle' + o.category.id
         listGeometries.push({
-          position: new TMap.LatLng(o.lat, o.lng),
-          properties: {
-            infoContent: infoContent
+          'id': o.id,
+          'styleId': styleKey,
+          'position': new TMap.LatLng(o.lat, o.lng),
+          'properties': {
+            'infoContent': infoContent
           }
         })
+        listStyles[styleKey] = new TMap.MarkerStyle({
+          'width': 50,
+          'height': 60, // 点标记样式高度（像素）
+          'src': o.category.iconImage,
+          'anchor': { x: 16, y: 32 }
+        })
       })
+      console.log(listStyles)
+      this.markerLayer.setStyles(listStyles)
       this.markerLayer.setGeometries(listGeometries)
     }
   }