Vue高德地图自定义覆盖物使用实例-content的使用

原创

已于 2022-05-11 23:33:02 修改 · 1.8w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #高德地图 #自定义覆盖物 #Marker

于 2018-08-01 16:54:18 首次发布

lizuncong (lizuncong) · GitHubI am a strong believer in reverse engineering. lizuncong has 42 repositories available. Follow their code on GitHub.https://github.com/lizuncong

本例使用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-ama