fix bug

.eslintrc.cjs

@@ -8,6 +8,11 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module'
   },
+  globals:{
+    AMap:true,
+    AMapUI:true,
+    Local:true
+  },
   plugins: ['vue', 'prettier'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "^2.0.6",
     "@smallwei/avue": "^3.2.5",
     "dateformat": "^5.0.3",

src/views/project/componens/info1.vue

@@ -86,10 +86,18 @@
       </div>
       <div class="flex flex-justify-center">
         <el-form-item class="full-width" style="flex: 2">
-          <div class="flex flex-center full-width" style="width: 95%">
-            <span class="title">项目位置:</span>
-            <el-input placeholder="请选择项目位置"></el-input>
-            <el-button class="ml-10" plain type="primary">查看地图</el-button>
+          <div
+            class="flex flex-center flex-justify-start full-width"
+            style="width: 99%"
+          >
+            <span style="width: 90px" class="text-left">项目位置:</span>
+            <div class="full-width">
+              <map-picker
+                :project-id="form.id"
+                :latitude="form.latitude"
+                :longitude="form.longitude"
+              />
+            </div>
           </div>
         </el-form-item>
         <el-form-item class="full-width" style="flex: 1">
@@ -139,11 +147,13 @@
 <script>
 import wtCard from '@/components/wt-card/index.vue'
 import areaPicker from '@/components/area-picker/index.vue'
+import mapPicker from '@/views/project/componens/map-picker.vue'
 
 export default {
   components: {
     wtCard,
-    areaPicker
+    areaPicker,
+    mapPicker
   },
   props: {
     info: {
@@ -157,14 +167,35 @@ export default {
     info: {
       handler(val) {
         this.form = val
+        this.mapForm = [
+          this.form.latitude,
+          this.form.longitude,
+          this.form.address
+        ]
       },
       immediate: true
+    },
+    mapForm: {
+      handler(val) {
+        this.form.latitude = val[0]
+        this.form.longitude = val[1]
+        this.form.address = val[2]
+      },
+      immediate: false
     }
   },
   data() {
     return {
       disabled: true,
-      form: {}
+      form: {},
+      params: {
+        zoom: 10
+      },
+      mapForm: [
+        113.10235504165291,
+        41.03624227495205,
+        '内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒'
+      ]
     }
   },
   methods: {

src/views/project/componens/map-picker.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <div class="flex flex-center">
+      <el-input class="mr-10" placeholder="请选择项目地址"></el-input>
+      <el-button type="primary" plain @click="show = true">查看地图</el-button>
+    </div>
+    <el-dialog v-model="show" :width="960">
+      <template #header
+        ><h4 class="full-width text-left">地理位置</h4></template
+      >
+      <div class="flex flex-center flex-justify-start flex-col">
+        <div id="container" class="map"></div>
+        <el-divider />
+        <div class="flex flex-center flex-justify-start full-width">
+          <div class="text-left bold-500 black mr-10">相关图片</div>
+          <filepicker :project-id="projectId" />
+        </div>
+        <div class="img-content flex flex-justify-start hide-scrollbar mt-20">
+          <img src="../../../assets/svg/folder.svg" v-for="i in 20" />
+        </div>
+        <div class="full-width flex flex-center flex-justify-end">
+          <el-button type="primary" plain @click="show = false"
+            >取 消
+          </el-button>
+          <el-button type="primary">确 定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import filepicker from '@/components/filepicker/index.vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { shallowRef } from 'vue'
+
+export default {
+  components: {
+    filepicker
+  },
+  setup() {
+    const map = shallowRef(null)
+    return {
+      map
+    }
+  },
+  watch: {
+    show: {
+      handler(val) {
+        if (val) {
+          this.initMap()
+        }
+      },
+      immediate: true
+    },
+    latitude: {
+      handler(val) {
+        if (val.length > 0 && this.show) {
+          this.addMarker()
+        }
+      }
+    }
+  },
+  props: {
+    projectId: {
+      required: true,
+      type: String,
+      default: ''
+    },
+    latitude: {
+      type: Number,
+      default: 0
+    },
+    longitude: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      show: false,
+      aMap: null
+    }
+  },
+  methods: {
+    initMap() {
+      AMapLoader.load({
+        key: '6577c6fd4841e6c69d5fb1bd15bd4696', // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ['AMap.Scale', 'AMap.Marker'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      })
+        .then(AMap => {
+          this.aMap = AMap
+          this.map = new AMap.Map('container', {
+            // 设置地图容器id
+            viewMode: '2D', // 是否为3D地图模式
+            zoom: 15, // 初始化地图级别
+            mapStyle: 'amap://styles/whitesmoke',
+            center: [this.latitude, this.longitude] // 初始化地图中心点位置
+          })
+          this.addMarker()
+          this.addEvent()
+        })
+        .catch(e => {
+          console.log(e)
+        })
+    },
+    addMarker() {
+      console.log('addMark')
+      const marker = new this.aMap.Marker({
+        position: new this.aMap.LngLat(this.latitude, this.longitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        title: '大理'
+      })
+      this.map.add(marker)
+    },
+    addEvent() {
+      this.map.on('click', event => {
+        console.log(event)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.map {
+  width: 100%;
+  height: 400px;
+}
+
+.img-content {
+  width: 100%;
+  height: 140px;
+  overflow-x: scroll;
+
+  img {
+    width: 120px;
+    height: 120px;
+  }
+}
+</style>

yarn.lock

@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
+"@amap/amap-jsapi-loader@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz#9ec4b4d5d2467eac451f6c852e35db69e9f9f0c0"
+  integrity sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==
+
 "@babel/parser@^7.20.15", "@babel/parser@^7.21.3":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"