vue amap 自定义图标icon 大小修改和绑定点击事件

<template>
  <div class="row">
    <el-amap id="map" vid="amapDemo" :zoom="zoom" :center="center">
      <el-amap-marker
        v-for="marker in markers"
        :events="events"
        :key="marker.id"         :position="marker.position"         :icon="marker.icon"       ></el-amap-marker>     </el-amap>   </div> </template> <script> export default {   name: "maps",   data() {     return {       center: [115.95317,28.680948],       zoom: 14,       markers:[         {           id:1,           position:[115.95317,28.684863],           icon: require("@/assets/icon1.png")         },         {           id:2,           position:[115.978576,28.696985],           icon: require("@/assets/icon2.png")         },         {           id:3,           position:[115.955831,28.666113],           icon: require("@/assets/icon1.png")         },       ],

        events:{

          //点击事件
          click(a) {
            console.log(a)
          }
        }

    }
  }
}
</script>

<style scoped>
  .row,#map {
    height: 100%;
  }

  /* 图标大小修改 */
  /deep/ .amap-icon img {
    max-width: 2rem !important;
    max-height: 2rem !important;
  }
</style>

 

posted @ 2021-03-18 10:14  小尘XY  阅读(4191)  评论(0)    收藏  举报