我的需求為丧靡，現(xiàn)在地圖上根據(jù)坐標(biāo)顯示點(diǎn)標(biāo)記综膀，當(dāng)鼠標(biāo)移到點(diǎn)標(biāo)記上時(shí)，動(dòng)態(tài)的在選擇的點(diǎn)標(biāo)記旁邊彈出相應(yīng)的信息小彈框葛躏，同時(shí)小彈框中有可以點(diǎn)擊的按鈕澈段，點(diǎn)擊地圖其他地方時(shí)關(guān)閉信息窗體，實(shí)現(xiàn)效果如下：

image.png

安裝及上手就不贅述了舰攒，參考vue-amap文檔
大概思路為败富，遍歷接口信息，將坐標(biāo)push進(jìn)點(diǎn)標(biāo)記列表中摩窃，同時(shí)將信息窗體push進(jìn)來兽叮，位置為點(diǎn)標(biāo)記的位置適當(dāng)偏移，新版本el-amap-info-window中可以寫內(nèi)部的content及樣式猾愿，省去字符串拼接的麻煩鹦聪，代碼：

<template>
  <div class="amap-page-container">
    <div class="toolbar">
      當(dāng)前坐標(biāo): {{ 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: '另一個(gè)地址'

      },
      {
        position: '121.564254, 31.21135',
        address: '一個(gè)地址'

      }],
      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, //不設(shè)置默認(rèn)藍(lán)色水滴
          events: {
            mouseover() {
              // 方法：鼠標(biāo)移動(dòng)到點(diǎn)標(biāo)記上，顯示相應(yīng)窗體
              that.windows.forEach(window => {
                window.visible = false // 關(guān)閉窗體
              })
              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
        })
      })
      //  加點(diǎn)
      this.markers = markers
      // 加彈窗
      this.windows = windows
    },
    checkDetail() {
      alert('點(diǎn)擊了查看詳情')
    }
  }

}
</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>