1. 程式人生 > >Vue高德地圖自定義覆蓋物使用例項-content的使用

Vue高德地圖自定義覆蓋物使用例項-content的使用

本例使用content實現在高德地圖上自定義覆蓋物,即自定義marker。先看如下效果:

標題

在地圖上顯示三種顏色的marker:綠色,紫色,橙色。當點選其中的一個marker時,該Marker顏色變為藍色,size變大,並旋轉45度。再次點選其他marker時,之前點選的marker恢復成原來的形狀。

<template>
  <div id="mapDemo">
    <el-amap ref='map' vid="amapDemo" :amap-manager="amapManager" :events="mapEvents" :zoom="zoom" :center="centerPosition" class="amap-demo">
      <el-amap-marker class="selectedMarker"
        v-for="(item, index) in datas"
        :key="index"
        :position="item.lnglat"
        topWhenClick="true"
        :extData="item"
        :content="getMarkerContent(item, 30, 30)"
        :events="markerEvents">
      </el-amap-marker>
    </el-amap>
  </div>
</template>

<style lang="less" scoped>
  .amap-demo {
    height: 3rem;
  }
</style>
<script>
  import { AMapManager } from 'vue-amap'
  let amapManager = new AMapManager()
  export default {
    data() {
      let self = this
      return {
        amapManager,
        zoom: 18, //地圖縮放級別
        centerPosition: [121.5273285, 31.21515044], // 使用者當前位置經緯度
        datas: [
          {
            id: 1,
            title: '1',
            level: 'A',
            lnglat: [121.5273285, 31.21515044],
          },
          {
            id: 2,
            title: '2',
            level: 'A',
            lnglat: [121.5253184, 31.21515044],
          },
          {
            id: 3,
            title: '3',
            level: 'A',
            lnglat: [121.5253184, 31.21315044],
          },
          {
            id: 4,
            title: '4',
            level: 'A',
            lnglat: [121.5253184, 31.21715044],
          },
          {
            id: 5,
            title: '5',
            level: 'A',
            lnglat: [121.5233184, 31.21515044],
          },
          {
            id: 6,
            title: '6',
            level: 'A',
            lnglat: [121.5233184, 31.21715044],
          },
          {
            id: 7,
            title: '1',
            level: 'B',
            lnglat: [121.5283285, 31.21815044],
          },
          {
            id: 8,
            title: '2',
            level: 'B',
            lnglat: [121.5293184, 31.21915044],
          },
          {
            id: 9,
            title: '3',
            level: 'B',
            lnglat: [121.5263184, 31.21615044],
          },
          {
            id: 10,
            title: '4',
            level: 'B',
            lnglat: [121.5223184, 31.21915044],
          },
          {
            id: 11,
            title: '5',
            level: 'B',
            lnglat: [121.5203184, 31.21515044],
          },
          {
            id: 12,
            title: '6',
            level: 'B',
            lnglat: [121.5233184, 31.21015044],
          },
          {
            id: 13,
            title: '1',
            level: 'C',
            lnglat: [121.5203285, 31.21815044],
          },
          {
            id: 14,
            title: '2',
            level: 'C',
            lnglat: [121.5293184, 31.21015044],
          },
          {
            id: 15,
            title: '3',
            level: 'C',
            lnglat: [121.5263184, 31.21315044],
          },
          {
            id: 16,
            title: '4',
            level: 'C',
            lnglat: [121.5223184, 31.21415044],
          },
          {
            id: 17,
            title: '5',
            level: 'C',
            lnglat: [121.5243184, 31.21915044],
          },
          {
            id: 18,
            title: '6',
            level: 'C',
            lnglat: [121.5203184, 31.20995044],
          },
          {
            id: 19,
            title: '7',
            level: 'C',
            lnglat: [121.5103184, 31.20995044],
          }
        ],
        clickedMarker: null, // 儲存當前點選的Marker
        mapEvents: {
          init(o) {
            // o 為地圖元件例項
          },
          complete () {
            const map = self.amapManager.getMap() // 獲取地圖元件例項
            // setFitView(overlayList:Array)
            // 根據地圖上新增的覆蓋物分佈情況,
            // 自動縮放地圖到合適的視野級別,引數overlayList預設為當前地圖上新增的所有覆蓋物圖層
            map.setFitView()
          }
        },
        markerEvents: {
          click(e) {
            if (self.clickedMarker === e.target) return // 點選的是同一個Marker
            const data = e.target.getExtData()
            if (self.clickedMarker) { // 先恢復上次點選的Marker的樣式
              self.clickedMarker.setOffset(new AMap.Pixel(-10, -30))
              self.clickedMarker.setContent(self.getMarkerContent(self.clickedMarker.getExtData(), 30, 30))
            }
            e.target.setContent(self.getMarkerContent(data, 40, 40, true))
            e.target.setOffset(new AMap.Pixel(-18, -50))
            self.clickedMarker = e.target
          }
        }
      }
    },
    mounted() {
      AMap.plugin('AMap.CircleEditor', function () {//回撥函式
      })
    },
    methods: {
      getMarkerContent (item, width, height, isRotate = false) {
        const bgRoate = isRotate ? 'transform: rotate(45deg);' : ''
        const txRotate = isRotate ? 'transform: rotate(-45deg);' : ''
        let backgroundColor = item.level === 'A' ? '#FF8100' : (item.level === 'B' ? '#8D3ECD' : '#2DCD72')
        if ( isRotate ) {
          backgroundColor = '#0893FF'
        }
        const content = `<div style="display: flex;
                                      justify-content: center;
                                      align-items: center;
                                      height: ${width}px;
                                      width: ${height}px;
                                      border-radius: .05rem;
                                      ${bgRoate}
                                      font-family: Arial-BoldMT;
                                      font-size: 16px;
                                      color: #FFFFFF;
                                      box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.30);
                                      background-color: ${backgroundColor};">
                                         <div style="${txRotate}"> ${item.title} </div>
                           </div>`
        return content
      }
    },
  }
</script>