1. 引用高德的js

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=945bxxxxxxxe5432f&&plugin=AMap.Geocoder,AMap.AutoComplete,AMap.PlaceSearch"></script>

2.在vue.config.js 配置

3. 建立自定義窗體js 

function createInfoWindow(title, content, callback) {
  var info = document.createElement('div')
  info.className 
 
= 'custom-info input-card content-window-card'

  // 可以通過下面的方式修改自定義窗體的寬高
  info.style.width = '250px'
  // 定義頂部標題
  var top = document.createElement('div')
  // var titleD = document.createElement("div");
  var closeX = document.createElement('img')
  top.className = 'info-top'

  closeX.src = require('@/assets/close.png')
  closeX.onclick 
 
= callback

  // top.appendChild(titleD);
  top.innerHTML = title
  top.appendChild(closeX)
  info.appendChild(top)

  // 定義中部內容
  var middle = document.createElement('div')
  middle.className = 'info-middle'
  middle.style.backgroundColor = 'white'
  middle.innerHTML = content
  info.appendChild(middle)

  
 
// 定義底部內容
  var bottom = document.createElement('div')
  bottom.className = 'info-bottom'
  bottom.style.position = 'relative'
  bottom.style.top = '0px'
  bottom.style.margin = '0 auto'
  info.appendChild(bottom)
  return info
}

export default {
  createInfoWindow
}

自定義窗體的css

>>> .input-card{
  background-color:rgba(000,000,000,0);

}
>>> .content-window-card {
     position: relative;
     box-shadow: none;
     bottom: 0;
     left: 0;
     width: auto;
     padding: 0;
   }

   >>>.content-window-card p {
     height: 2rem;
   }

  >>> .custom-info {
     /* border: solid 1px silver; */
   }

  >>> .info-top {
     position: relative;
     height: 30px;
     line-height: 30px;
     font-size: 14px;
     padding: 0 10px;
     background-color:#fdfdfd;
     border-bottom:1px #eee solid;
   }

   >>>.info-top span:nth-child(2) {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 200px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: center;
   }

  >>> .info-top img {
     position: absolute;
     top: 8px;
     right: 10px;
     transition-duration: 0.25s;
     width: 15px;
   }

   >>> .info-top img:hover {
     box-shadow: 0px 0px 5px #000;
   }

   >>>.info-middle {
     background: #fdfdfd !important;
     font-size: 12px;
     padding: 10px 6px;
     line-height: 20px;
     color: #333;
   }

   >>>.info-bottom {
     height: 0px;
     width: 100%;
     clear: both;
     text-align: center;
     width: 0;
       height: 0;
       border-left: 5px solid transparent;
       border-right: 15px solid transparent;
       border-top: 20px solid #fdfdfd;
   }

   >>>.info-bottom img {
     position: relative;
     z-index: 104;
   }

   >>>.info-middle img {
     float: left;
     margin-right: 6px;
   }

引用 js

import createInfoWindow from '@/utils/amap'

差不多就是這個樣子

 4.建立地圖// 高德地圖   

createMap() {     
 window._AMapSecurityConfig = { securityJsCode: 'xxx' }    

  if (this.getGpsType === true) {       
this.map = new AMap.Map('container', {
          center: ['103', '40'],
          scrollWheel: true,
          resizeEnable: true,
          zoom: 4,
          // mapStyle: 'amap://styles/blue',
          mapStyle: 'amap://styles/樣式id' //  自定義樣式2
        })
        this.setMarker()
        this.getGpsType = false
      } else {
        // 動態載入 當不是第一次載入時 刪除當前地圖的所有標記點
        this.map.clearMap() // 清除地圖所有的標記點
        console.log('更新標記點')
        this.setMarker()
      }
    },
    // 設定標記點
    setMarker() {
      for (const i of this.dataList) {
        this.marker = new AMap.Marker({
          position: [i.longitude, i.latitude], // 位置
          map: this.map
        })
        // 給標記點新增資訊
        this.marker.title = `<span>個人資訊</span>`this.marker.content = [
            '使用者ID:' + i.userId,
            '平臺:' + i.clientType,
            '實名姓名:' + '未實名',
            '更新時間：' + i.clientTime
          ]this.marker.on('click', this.markerClick)
      }
      // 例項化資訊窗體
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, // 使用自定義窗體
        content: this.winInfo,
        offset: new AMap.Pixel(15, -35)
      })
    },
    // 3.點選標記 獲取所點選標記的資訊以及窗體要展示的資料，建立資訊窗體
    markerClick(e) {
      let content = e.target.content
      const self = this
      const userId = e.target.content[0].slice(5)
      console.log('userID', userId)
      const data = {
        userId
      }

      userSummary(data).then(res => {
        if (res.data.code === 200) {
          const trueName = res.data.data.user.trueName
          if (trueName) {
            content[2] = '實名姓名:' + trueName
          }
          content = JSON.stringify(content)
          this.winInfo = JSON.parse(content)
          this.winTitle = e.target.title
          // 設定窗體內容
          this.infoWindow.setContent(
            createInfoWindow.createInfoWindow(
              self.winTitle,
              self.winInfo.join('<br/>'),
              function() {
                // 關閉窗體
                self.map.clearInfoWindow()
              }
            )
          )
          // 開啟窗體
          self.infoWindow.open(self.map, e.target.getPosition())
        }
      })
    },
    createInfoWindow() {
      const infoWindowData = new AMap.InfoWindow({
        isCustom: true, // 使用自定義窗體
        content: this.$refs.infoData,
        offset: new AMap.Pixel(16, -45)
      })
      return infoWindowData
    },
    // 5.開啟窗體
    openInfoWindow(infoWindow, marker) {
      infoWindow.open(this.map, marker.getPosition())
    },
    // 6.關閉窗體
    closeInfoWindow() {
      this.map.clearInfoWindow()
    },

自動重新整理地圖示記點，並且點選標記點顯示個人資訊