vue3+高德api标点与自定义消息窗体/elementui弹窗

目录

高德api标点与自定义消息窗体

1.  无法使用vue-amap

2.  初始化的时候报错:error 'AMap' is not defined no-undef

3.  amap.js不知如何调用

 4. 把地图放el-card中无法显示

新增：点击标注的点打开elementui弹窗

1. 图片列表无法靠点击坐标获取

2. 图片最后一行左对齐

---

高德api标点与自定义消息窗体

主要参照:

vue 调用高德地图api实现标点和显示窗体

踩坑：

1.  无法使用vue-amap

解决方法: vue-amap貌似只能在vue2中使用，只有调用高德地图api

2.  初始化的时候报错:error 'AMap' is not defined no-undef

解决方法：在AMap前面加window—window.AMap

3.  amap.js不知如何调用

解决方法：在main.js里导入—import './assets/scss/amap.scss'

 

 4. 把地图放el-card中无法显示

解决方法：给el-card设定高度

新增：点击标注的点打开elementui弹窗

 <el-dialog v-model="dialogTableVisible" title="植物分布">
      <div class="container" @click="linkTo">
        <div
          class="list"
          v-for="(item, i) in pointList[curId].imgAddr"
          :key="i"
        >
          <el-image :src="item.addr" class="img" fit="cover"></el-image>
          <div>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
      <template #footer>
        <span
          class="dialog-footer"
          style="display: flex; flex-direction: row-reverse"
        >
          <el-pagination
            layout="prev, pager, next"
            :total="50"
            style="width: 30%"
          />
        </span>
      </template>
    </el-dialog>

 marker.on("click", () => { self.markerClick(id) });//绑定事件
 markerClick (e) {
      this.dialogTableVisible = true;//打开弹窗
      this.curId = e;//传id获取弹窗中的图片列表
    },

实现效果(还没有接口，自己模拟的数据，没做分页)：

 踩坑：

1. 图片列表无法靠点击坐标获取

问题描述：需求是点击标点的坐标，打开弹窗，内容是该地理位置植物分布的图片和名称，最开始想的是点击坐标，获取坐标值，根据坐标值获取该坐标的图片列表，但是实际上点击的坐标其实是一个范围，比如坐标是（113.050818, 24.912506),我点击的位置可能是(113.032445,25,000001),因此靠坐标获取是不可靠的

解决方法：在数组for循环标点时，为每个位置绑定一个i，依靠i获取，注意深拷贝浅拷贝问题

2. 图片最后一行左对齐

解决方法：

.container {
  display: flex;
  flex-wrap: wrap;
}
.list {
  width: 19%;
  height: 120px;
  margin-top: 15px;
  text-align: center;
}
.list:not(:nth-child(5n)) {
  margin-right: calc(5% / 4);
}
.img {
  width: 100px;
  height: 100px;
  display: inline-block;
}