Skip to content
`amap-js-vue` 是基于 Vue.js 和 高德地图 AMap JavaScript API 的地图组件
JavaScript CSS Shell Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
build
src
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.prettierrc.js
.travis.yml
LICENSE
README.md
babel.config.js
package.json
postcss.config.js
stylelint.config.js

README.md

amap-js-vue

Build Status npm version npm downloads npm downloads JS Gzip Size npm license

amap-js-vue 是基于 Vue.js 和 高德地图 AMap JavaScript API 的地图组件。

开发者在使用高德地图API更加得心应手。

安装

npm:

$ npm install amap-js-vue --save

Yarn:

$ yarn add amap-js-vue

引入组件

方式一.导入所有组件

import Vue from 'vue';
import AMapJS from 'amap-js-vue';
import 'amap-js-vue/lib/index.css';

// 安装并添加配置
// 如果在添加配置可以调用 AMapJS.config({});
Vue.use(AMapJS, {
  AMap: 'https://webapi.amap.com/maps?key=您申请的高德key值&v=1.4.15&plugin=[]',
  AMapUI: 'https://webapi.amap.com/ui/1.0/main-async.js', // default: false
});

方式二.手动按需引入组件

在不使用插件的情况下,可以手动引入需要的组件

import config from 'amap-js-vue/config';
import Map from 'amap-js-vue/lib/map';
import 'amap-js-vue/lib/map/style';

// 添加配置
config({
  AMap: 'https://webapi.amap.com/maps?key=您申请的高德key值&v=1.4.15&plugin=[]',
  AMapUI: 'https://webapi.amap.com/ui/1.0/main-async.js', // default: false
});

方式三.自动按需引入组件 (推荐)

安装插件

npm i babel-plugin-import -D

// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'amap-js-vue',
      libraryDirectory: 'es',
      style: true
    }, 'amap-js-vue']
  ]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { config, Map } from 'amap-js-vue';

// 添加配置
config({
  AMap: 'https://webapi.amap.com/maps?key=您申请的高德key值&v=1.4.15&plugin=[]',
  AMapUI: 'https://webapi.amap.com/ui/1.0/main-async.js', // default: false
});

快速上手

地图组件

<template>
  <am-map :init-map-options="options" style="width: 300px; height: 300px;"></am-map>
</template>

<script>
export default {
  data() {
    return {
      options: {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
      },
    };
  },
};
</script>

自定义组件

开发者根据需要定制组件满足自身需求。这里提供一个 createComponent 方法来创建组件;

my-component.vue

<template>
  <div>{{ msg }}</div>
</template>

<script>
import { createComponent } from 'amap-js-vue';

export default createComponent({
  name: 'AmMyComponent',
  data() {
    return {
      msg: 'Hello, MyComponent',
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
  },
  ready() {
    console.log('ready');
    const { AMap, AMapUI, map } = this.$maproot;
  },
  destroyed() {
    console.log('destroyed');
  },
});
</script>

<style></style>

以上是个简单当例子。 由于高德地图API的特殊性,所以除了Vue自身的Options API以外主要扩展了一个关键的生命周期ready, 它的主要特性是在地图 API 和 map 实例都创建好并且自身组件mounted生命周期之后所调用。

$maproot: 是指向 am-map 组件实例。包含 AMapAMapUI(可选)、 map

链接

AMap JavaScript API

AMap UI JavaScript API

License

Licensed under MIT

Copyright (c) 2019-present Derek Li

You can’t perform that action at this time.