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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM