高德离线地图vue-amap的api文档（1）：创建地图，撒点等等

最新推荐文章于 2025-10-08 16:53:33 发布

原创

最新推荐文章于 2025-10-08 16:53:33 发布 · 1.3w 阅读

77 ·

CC 4.0 BY-SA版权

文章标签：

#vue-amap api

前言：

高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。

注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网入口

官网入口

一、安装

npm 安装

CDN

目前可通过 unpkg.com/vue-amap 获取最新版本的资源。

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

Hello World

通过 CDN 的方式我们可以很容易地使用 vue-amap 写出一个 Hello world 页面。

<!DOCTYPE html>
<html>
  <head>
    <title>demo | vue-amap</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="app">
      <el-amap vid="amap"></el-amap>
    </div>
  </body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue-amap/dist/index.js"></script>
  <script>
    // 初始化高德地图的 key 和插件
    window.VueAMap.initAMapApiLoader({
      key: 'YOUR_KEY',
      plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'],
      // 默认高德 sdk 版本为 1.4.4
      v: '1.4.4'
    });

    new Vue({
      el: '#app',
      data: function(){
        return { }
      }
    });
  </script>
</html>

二、快速上手

本节将介绍如何在项目中使用 vue-amap。

1 - 项目结构

这里提供了简单的示例项目模板。

项目结构为：

|- src/  --------------------- 项目源代码
    |- App.vue
    |- main.js  -------------- 入口文件
|- .babelrc  ----------------- babel 配置文件
|- index.html  --------------- HTML 模板
|- package.json  ------------- npm 配置文件
|- webpack.config.js  -------- webpack 配置文件

项目中涉及到的几个文件如下：

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-amap-starter</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/build.js"></script>
  </body>
</html>

package.json

{
  "name": "vue-amap-starter",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 9876",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue-amap": "^0.0.8",
    "vue": "^2.0.5"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.13.2",
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.1",
    "cross-env": "^1.0.6",
    "vue-loader": "^9.8.0",
    "webpack": "beta",
    "webpack-dev-server": "beta"
  }
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  },
  performance: {
    hints: false
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

2 - 引入vue-amap

main.js

import Vue from 'vue';
import VueAMap from 'vue-amap';
import App from './App.vue';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'your amap key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <div id="app">
    <h3 class="title">{
  
  { msg }}</h3>
    <div class="amap-wrapper">
      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'vue-amap向你问好！'
    }
  }
}
</script>

<style>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>

安装依赖

npm install

构建

npm run dev

三、初始化

引入地图

一般项目中，对于 vue-amap 的初始化只需要调用 initAMapApiLoader 方法即可。

NPM 安装：

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
  v: '1.4.4'
});

CDN 引入：

window.VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
  v: '1.4.4'
});

Promise

在定制化程度较高的项目中，开发者可能只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 lazyAMapApiLoaderInstance。

NPM 安装：

import VueAMap from 'vue-amap';
import { lazyAMapApiLoaderInstance } from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
  uiVersion: '1.0' // ui库版本，不配置不加载,
  v: '1.4.4'
});

lazyAMapApiLoaderInstance.load().then(() => {
  // your code ...
  this.map = new AMap.Map('amapContainer', {
    center: new AMap.LngLat(121.59996, 31.197646)
  });
});

CDN 引入：

window.VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
  v: '1.4.4'
});

window.VueAMap.lazyAMapApiLoaderInstance.load().then(() => {
  // your code ...
  this.map = new AMap.Map('amapContainer', {
    center: new AMap.LngLat(121.59996, 31.197646)
  });
});

参数

参数名	类型	默认值	描述
key	`String`	``	高德 Key
plugin	`Array`	`['Autocomplete', 'PlaceSearch', 'PolyEditor', 'CircleEditor']`	插件
uiVersion	`String`	``	UI库版本
v	`String`	`1.4.4`	SDK 版本
protocol	`String`	`https`	引用协议

兼容高德原生 SDK

vue-amap 能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持。这章将介绍如何在 vue-amap 中使用高德 SDK。

实例方式-地图撒点

对于大多数 vue-amap 组件，都有 init 这个 event，参数为高德的实例，通过这样暴露高德实例的方式，开发者能够非常自由地将原生 SDK 和 vue-amap 结合起来使用。

这里以 el-amap 组件举例。el-amap 比较特殊，它同时还支持一个 amap-manager 属性，通过这个属性，可以在任何地方拿到高德原生 AMap.Map 实例。下面的例子，将介绍两种方式的使用。

若涉及到高德原生 AMap 需要注意的点：

确保 vue-amap 的导入名不是 AMap，推荐 import VueAMap from 'vue-amap' 避免和高德全局的 AMap 冲突。
若 eslint 报错 AMap is undefined 之类的错误。请将 AMap 配置到 .eslintrc 的 globals 中。

<template>
    <div class="amap-page-container">
      <el-amap vid="amapDemo"  :center="center" :amap-manager="amapManager" :zoom="zoom" :events="events" class="amap-demo">
      </el-amap>

      <div class="toolbar">
        <button @click="add()">add marker</button>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    // NPM 方式
    // import { AMapManager } from 'vue-amap';
    // CDN 方式
    let amapManager = new VueAMap.AMapManager();
    module.exports = {
      data: function() {
        return {
          zoom: 12,
          center: [121.59996, 31.197646],
          amapManager,
          events: {
            init(o) {
              let marker = new AMap.Marker({
                position: [121.59996, 31.197646]
              });

              marker.setMap(o);
            }
          }
        };
      },

      methods: {
        add() {
          let o = amapManager.getMap();
          let marker = new AMap.Marker({
            position: [121.59996, 31.177646]
          });

          marker.setMap(o);
        }
      }
    };
</script>

四、引入高德 UI 组件库

支持引入高德 UI 组件库，如下，只需在初始化的时候添加 uiVersion 的脚本版本号，就能轻松完成脚本的加载及初始化，版本号参考官方介绍

注：官方组件库出来不久，暂时不会封装。

VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
  uiVersion: '1.0.11' // 版本号
});

1、使用组件-实现效果-撒点（红）：

<template>
    <div class="amap-page-container">
      <el-amap vid="amapDemo"  :center="center" :map-manager="amapManager" :zoom="zoom" :events="events" class="amap-demo">
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>
  <script>
    // NPM 方式
    // import { AMapManager } from 'vue-amap';
    // CDN 方式
    let amapManager = new VueAMap.AMapManager();
    module.exports = {
      data: function() {
        return {
          zoom: 12,
          center: [121.59996, 31.197646],
          amapManager,
          events: {
            init(map) {
              AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
                const marker = new SimpleMarker({
                  iconLabel: 'A',
                  iconStyle: 'red',
                  map: map,
                  position: map.getCenter()
                });
              });
            }
          }
        };
      }
    };
</script>

2、仅使用初始化脚本

<template>
    <div id="amap-demo1" class="amap-demo">
    </div>
  </template>
  <style>
    #amap-demo1 {
      height: 300px;
    }
  </style>
  <script>
    // NPM 方式
    // import { lazyAMapApiLoaderInstance } from 'vue-amap';
    // CDN 方式
    const loadPromise = window.VueAMap.lazyAMapApiLoaderInstance.load()
    module.exports = {
      mounted() {
        loadPromise.then(() => {
          console.log('-----')
          this.map = new AMap.Map('amap-demo1', {
            center: [121.59996, 31.197646],
            zoom: 12
          })
          AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
            const marker = new SimpleMarker({
              iconLabel: 'A',
              iconStyle: 'red',
              map: this.map,
              position: this.map.getCenter()
            });
          });
        })
      }
    };
</script>

五、实现基础地图

<template>
    <div class="amap-page-container">
      <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
      </el-amap>

      <div class="toolbar">
        <button @click="getMap()">get map</button>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    // NPM 方式
    // import { AMapManager } from 'vue-amap';
    // CDN 方式
    let amapManager = new VueAMap.AMapManager();
    module.exports = {
      data: function() {
        return {
          amapManager,
          zoom: 12,
          center: [121.59996, 31.197646],
          events: {
            init: (o) => {
              console.log(o.getCenter())
              console.log(this.$refs.map.$$getInstance())
              o.getCity(result => {
                console.log(result)
              })
            },
            'moveend': () => {
            },
            'zoomchange': () => {
            },
            'click': (e) => {
              alert('map clicked');
            }
          },
          plugin: ['ToolBar', {
            pName: 'MapType',
            defaultType: 0,
            events: {
              init(o) {
                console.log(o);
              }
            }
          }]
        };
      },

      methods: {
        getMap() {
          // amap vue component
          console.log(amapManager._componentMap);
          // gaode map instance
          console.log(amapManager._map);
        }
      }
    };
</script>

实现效果：

1、静态属性

仅且可以初始化配置，不支持响应式。

名称	类型	说明
vid	String	地图容器节点的ID。
amapManager	AMapManager	地图管理对象。
defaultCursor	String	地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范。
animateEnable	Boolean	地图平移过程中是否使用动画，默认为true，即使用动画。
isHotspot	Boolean	是否开启地图热点，默认false 不打开。
rotateEnable	Boolean	地图是否可旋转，默认false。
resizeEnable	Boolean	是否监控地图容器尺寸变化，默认值为false。
showIndoorMap	Boolean	是否在有矢量底图的时候自动展示室内地图，PC端默认是true，移动端默认是false。
expandZoomRange	Boolean	是否支持可以扩展最大缩放级别.设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20。
dragEnable	Boolean	地图是否可通过鼠标拖拽平移，默认为true。
zoomEnable	Boolean	地图是否可缩放，默认值为true。
doubleClickZoom	Boolean	地图是否可通过双击鼠标放大地图，默认为true。
keyboardEnable	Boolean	地图是否可通过键盘控制，方向键控制地图平移，"+"和"-"可以控制地图的缩放，Ctrl+“→”顺时针旋转，Ctrl+“←”逆时针旋转，默认为true。
jogEnable	Boolean	地图是否使用缓动效果，默认值为true。
scrollWheel	Boolean	地图是否可通过鼠标滚轮缩放浏览，默认为true。
touchZoom	Boolean	地图在移动终端上是否可通过多点触控缩放浏览地图，默认为true。

2、动态属性

支持响应式。

名称	类型	说明
zooms	Array	地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
center	Array	地图中心点坐标值
labelzIndex	Number	地图标注显示顺序
lang	String	地图语言类型默认：zh_cn，可选值：zh_cn：中文简体，en：英文，zh_en：中英文对照
mapStyle	String	设置地图显示样式，目前支持normal（默认样式）、dark（深色样式）、light（浅色样式）、fresh(osm清新风格样式)四种

3、AmapManager

用于获取地图实例，以及获得地图内组件的实例。

名称	参数	返回类型	说明
getMap		AMap.Map	返回地图实例，注入该管理实例的组件的地图实例
getChildInstance	vid	instance	返回 vid 对应的组件实例

4、ref 可用方法

提供无副作用的同步帮助方法

函数	返回	说明
$$getInstance()	AMap.Map	获取地图实例
$$getCenter()	[lng: Number, lat: Number]	获取地图中心

5、事件

事件	参数	说明
complete		地图图块加载完成后触发事件
click	MapsEvent	鼠标左键单击事件相关示例
dblclick	MapsEvent	鼠标左键双击事件
mapmove		地图平移时触发事件
hotspotclick	{type,lnglat,name,id}	鼠标点击热点时触发（自v1.3 新增）
hotspotover	{type,lnglat,name,id}	鼠标滑过热点时触发（自v1.3 新增）
hotspotout	{type,lnglat,name,id}	鼠标移出热点时触发（自v1.3 新增）
movestart		地图平移开始时触发
moveend		地图平移结束后触发。如地图有拖拽缓动效果，则在缓动结束后触发
zoomchange		地图缩放级别更改后触发
zoomstart		缩放开始时触发
zoomend		缩放停止时触发
mousemove	MapsEvent	鼠标在地图上移动时触发