vue-amap高德地图显示点标记及相应的信息窗体实现

我的需求为，现在地图上根据坐标显示点标记，当鼠标移到点标记上时，动态的在选择的点标记旁边弹出相应的信息小弹框，同时小弹框中有可以点击的按钮，点击地图其他地方时关闭信息窗体，实现效果如下：

安装及上手就不赘述了，参考vue-amap文档
大概思路为，遍历接口信息，将坐标push进点标记列表中，同时将信息窗体push进来，位置为点标记的位置适当偏移，新版本el-amap-info-window中可以写内部的content及样式，省去字符串拼接的麻烦，代码：

<template>
  <div class="amap-page-container">
    <div class="toolbar">
      当前坐标: {{ lng }}, {{ lat }}
    </div>
    <el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      :events="events"
      pitch-enable="false"
    >
      <el-amap-marker v-for="(marker,index) in markers" :key="index" :events="marker.events" :position="marker.position" />
      <el-amap-info-window
        v-if="window"
        :position="window.position"
        :visible="window.visible"
        :content="window.content"
        :offset="window.offset"
        :close-when-click-map="true"
        :is-custom="true"
      >
        <div id="info-window">
          <p>{{ window.address }}</p>
          <div class="detail" @click="checkDetail">查看详情</div>
        </div>
      </el-amap-info-window>
    </el-amap>
  </div>
</template>

<script>

export default {
  name: 'AmapPage',
  data: function() {
    const self = this
    return {
      data: [{
        position: '121.599197, 31.205379',
        address: '另一个地址'

      },
      {
        position: '121.564254, 31.21135',
        address: '一个地址'

      }],
      zoom: 3,
      center: [121.599197, 31.205379],
      expandZoomRange: true,
      markers: [],
      windows: [],
      window: '',
      events: {
        click(e) {
          const { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
        }
      },
      lng: 0,
      lat: 0
    }
  },
  mounted() {
    this.point()
  },
  methods: {
    point() {
      const markers = []
      const windows = []
      const that = this
      this.data.forEach((item, index) => {
        markers.push({
          position: item.position.split(','),
          // icon:item.url, //不设置默认蓝色水滴
          events: {
            mouseover() {
              // 方法：鼠标移动到点标记上，显示相应窗体
              that.windows.forEach(window => {
                window.visible = false // 关闭窗体
              })
              that.window = that.windows[index]
              that.$nextTick(() => {
                that.window.visible = true
              })
            }
          }
        })
        windows.push({
          position: item.position.split(','),
          isCustom: true,
          offset: [115, 55], // 窗体偏移
          showShadow: false,
          visible: false, // 初始是否显示
          address: item.address
        })
      })
      //  加点
      this.markers = markers
      // 加弹窗
      this.windows = windows
    },
    checkDetail() {
      alert('点击了查看详情')
    }
  }

}
</script>

<style lang="scss" scoped>
    .amap-demo {
      height: 450px;
    }
    .amap-page-container {
      position: relative;
    }
    #info-window{
      width: 211px;
      height: 146px;
      margin-left: 30px;
      background:rgba(255,255,255,0.9);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      .detail{
        width: 100%;
        height: 24px;
        color: #fff;
        background-color: #1a73e8;
        position: absolute;
        bottom: 0;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
      }
    }
</style>