Vue高德地圖自定義覆蓋物使用例項-content的使用
阿新 • • 發佈:2019-01-11
本例使用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>