效果图

image.png

第三方相关

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key='高德后台获取(Web服务)'"></script>
    <script type="text/javascript" src="http://webapi.amap.com/ui/1.0/main.js"></script>

业务代码

<template>
  <div class="map-box">
    <div id="js-container" class="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chooseValue: [],
      AMapUI: null,
      AMap: null
    }
  },
  async created() {
    this.getPointData()
  },
  methods: {
    /**
     * @Description: 获取后端景区数据
     * @Author: you name
     * @Date: 2021/4/2
     */
    getPointData() {
      const pointData = [
        {
          'id': 30,
          'name': '测试',
          'desc': '测试测试测试测试测试测试测试测试测试测试',
          'img': 'http://twst.isart.me/1617957949747_微信图片_202103241717127.jpg',
          'lon': 99.085249,
          'lat': 36.766608
        }
      ]
      this.initMap(pointData)
    },

    /**
     * @Description: 实例化地图
     * @Author: you name
     * @Date: 2021/4/2
     */
    initMap(points) {
      console.log(points)
      let AMapUI = this.AMapUI = window.AMapUI
      let AMap = window.AMap
      this.AMap = window.AMap
      AMapUI.loadUI([ 'control/BasicControl' ], BasicControl => {
        // 根据经纬度 定位map的初始位置
        const map = new AMap.Map('js-container', {
          center: [ '108.93879', '34.535061' ],
          zoom: 5
        })

        /*
          // 接入 放大/缩小 的插件zhuru
          map.addControl(new BasicControl.Zoom({
            position: 'rb'
            // showZoomNum: true //是否显示zoom值
          }))
        */

        const markers = []

        for (var i = 0; i < points.length; i += 1) {
          // 整理每项标记的数据格式
          const markersItem = new AMap.Marker({
            map: map,
            id: points[i].id,
            position: [ points[i].lon, points[i].lat ],
            name: points[i]['name'],
            desc: points[i]['desc'],
            img: points[i]['img'],
            content: '<div style="width: 14px;height: 14px;border-radius: 50%;padding: 2px;border: 1px solid #409eff;background-color: #409eff;background-clip: content-box;"></div>',
            offset: new AMap.Pixel(-15, -15)
          })
          // 为每项标记添加点击事件
          markersItem.on('click', event => {
            // 关闭弹窗
            const closeInfoWindow = () => {
              map.clearInfoWindow()
            }
            //构建信息窗体
            const createInfoWindow = (title, content) => {
              let info = document.createElement('div')
              info.className = 'custom-info input-card content-window-card'
              // 顶部标题
              let top = document.createElement('div')
              let titleD = document.createElement('div')
              let closeX = document.createElement('img')
              top.className = 'info-top'
              titleD.innerHTML = title
              closeX.src = require('../../assets/images/icon/x.png')
              closeX.onclick = closeInfoWindow
              top.appendChild(titleD)
              top.appendChild(closeX)
              info.appendChild(top)
              // 中部内容
              var middle = document.createElement('div')
              middle.className = 'info-middle'
              middle.innerHTML = content
              info.appendChild(middle)
              const el_button = middle.querySelector('.info-middle-content').querySelector('.info-middle-content-btn')

              let clickItem = {
                id: event.target.w.id,
                name: event.target.w.name,
                img: event.target.w.img
              }

              if (this.chooseValue.map(i => i.id).includes(clickItem.id)) {
                el_button.innerHTML = '已添加'
              } else {
                el_button.innerHTML = '添加'
              }

              el_button.onclick = () => {
                if (el_button.innerHTML === '添加') {
                  // 添加景区标记
                  el_button.innerHTML = '已添加'
                  this.chooseValue.push(clickItem)
                  console.log(this.chooseValue)
                } else {
                  // 移除景区标记
                  el_button.innerHTML = '添加'
                  this.chooseValue.splice(this.chooseValue.indexOf(clickItem), 1)
                }
              }
              return info
            }

            const contentArr = []
            let title = event.target.w.name
            contentArr.push(`<img src="${ event.target.w.img }">`)
            contentArr.push(`<div class="info-middle-content">
              <div class="info-middle-content-text">${ event.target.w.desc }</div>
              <div class="info-middle-content-btn">${ this.chooseValue.includes(event.target.w.id) ? '已添加' : '添加' }</div>
            </div>`)
            // 定义信息窗体
            let infoWindow = new AMap.InfoWindow({
              isCustom: true,  //使用自定义窗体
              content: createInfoWindow(title, contentArr.join('')),
              offset: new AMap.Pixel(0, -15)
            })
            // 打开信息窗体
            infoWindow.open(map, markersItem.getPosition())
          })
          // 存储标记
          markers.push(markersItem)
        }
        // 接入点聚合的插件
        map.plugin([ 'AMap.MarkerClusterer' ], function() {
          new AMap.MarkerClusterer(map, markers, { gridSize: 80 })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .map-box {
    width: 100vw;
    height: 100vh;
  }

  .map {
    width: 100vw;
    height: 100vh;
    -moz-user-select: none; /* Firefox私有属性 */
    -webkit-user-select: none; /* WebKit内核私有属性 */
    -ms-user-select: none; /* IE私有属性(IE10及以后) */
    -khtml-user-select: none; /* KHTML内核私有属性 */
    -o-user-select: none; /* Opera私有属性 */
    user-select: none; /* CSS3属性 */
  }

  .content-window-card {
    position: relative;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 0;
    box-shadow: 0 7px 38px 0 rgba(145, 142, 142, 0.15);
  }

  .info-top {
    position: relative;
    background: #f5f7fa;
    border-radius: 5px 5px 0 0;
  }

  .info-top div {
    display: inline-block;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    line-height: 31px;
    padding: 0 10px;
  }

  .info-top img {
    position: absolute;
    top: 7px;
    right: 10px;
    transition-duration: 0.25s;
    width: 18px;
    height: 18px;
  }

  .info-middle {
    font-size: 12px;
    padding: 10px 6px;
    line-height: 20px;
    background-color: #ffffff !important;
    border-radius: 0 0 5px 5px;
    display: flex;
  }

  .info-middle img {
    border-radius: 5px;
    object-fit: cover;
    width: 100px !important;
    height: 80px !important;
    margin: auto;
  }

  .info-middle-content {
    margin-left: 8px;
    width: 200px;
  }

  .info-middle-content-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .info-middle-content-btn {
    margin: auto;
    text-align: center;
    width: 40px;
    border: 1px solid #57acfb;
    border-radius: 5px;
    color: #57acfb;
    font-size: 12px;
    cursor: pointer;
  }
</style>