vue中使用高德地图 vue-amap 常见配置

最新推荐文章于 2025-09-24 11:12:47 发布

原创

最新推荐文章于 2025-09-24 11:12:47 发布 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #定位 #js #javascript

本文展示了如何在Vue项目中集成高德地图API，包括地图初始化、定位、搜索、标记、信息窗口等功能。通过引入Vue-AMap插件，实现了地图操作、工具栏、比例尺、鹰眼等组件，并提供了详细代码示例。

该文章已生成可运行项目，

效果：

使用：

先下载依赖包 npm install vue-amap --save

安装、引入依赖

import VueAMap from 'vue-amap'
VueAMap.initAMapApiLoader({
  key: '自己高德地图的key',
  plugin: [
    // 定位空间，用来获取和展示用户主机所在的经纬度位置
    'AMap.Geolocation',
    // 输入提示插件
    'AMap.Autocomplete',
    // POI搜索插件
    'AMap.PlaceSearch',
    // 右下角缩略图插件，比例尺
    'AMap.Scale',
    // 地图鹰眼插件
    'AMap.OverView',
    // 地图工具条
    'AMap.ToolBar',
    // 类别切换空间，实现默认图层与卫星图，实施交通层之间切换的控制
    'AMap.MapType',
    // 编辑 折线多边形
    'AMap.PolyEditor',
    'AMap.CircleEditor',
    // 地图编码
    'AMap.Geocoder'
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
})
Vue.use(VueAMap)

代码：

HTML：

<div class="amap-page-container">
    <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    ></el-amap-search-box>
    <!-- 搜索框 -->
    <!-- <el-amap-search-box
      class="search-boxMap"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    >
    </el-amap-search-box> -->
    <el-amap
      ref="map"
      vid="amapDemo"
      :amap-manager="amapManager"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      :events="events"
      :rightclick="rightclick"
      class="amap-demo"
    >
      <!-- 在地图上标记点 -->
      <el-amap-marker
        v-for="(marker,index) in markers"
        :key="index"
        :position="marker"
      >
      </el-amap-marker>
      <!-- 坐标点 -->
      <el-amap-marker
        vid="amapDemo"
        :position="center"
      ></el-amap-marker>

      <!-- <el-amap-info-window

本文章已经生成可运行项目