vue-amap infowindow基础用法

yuyu_2019

于 2020-12-06 16:40:27 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-amap

本文链接：https://blog.youkuaiyun.com/yuyu_2019/article/details/110742473

vue-amap 专栏收录该内容

10 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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
  }
}