vue-amap infowindow基础用法

最新推荐文章于 2025-01-18 15:20:32 发布

原创最新推荐文章于 2025-01-18 15:20:32 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

vue-amap 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用高德地图组件实现的地图应用示例。该示例展示了如何在页面中集成高德地图，并通过设置缩放级别、中心点坐标、信息窗口等内容来定制地图展示效果。

<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo"
             :zoom="zoom"
             :center="center"
             :amap-manager="amapManager"
             :events="mapEvents"
             class="amap-demo">
             
      <el-amap-info-window :position="currentWindow.position"
                           :content="currentWindow.content"
                           :visible="currentWindow.visible"
                           :events="currentWindow.events"
                           :offset="[8,-32]">
      </el-amap-info-window>
      
    </el-amap>
  </div>
</template>

data () {
return {
  currentWindow: {
    position: [116.405994, 39.915378],
    content: '<div class="red">Hi! I am here!</div>',
    events: {

    },
    visible: true
  }
}