vue-amap的使用

官网链接：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

1.安装：

npm install vue-amap --save

2.引入Vue-amap

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

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: 'your amap key',//你申请的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)
})

3.模板中使用

<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 {
   500px;
  height: 500px;
}
</style>

API：

 /*
            AMap.Marker 点标记
            属性：
                position:点标记在地图上的位置，默认地图中心点
                offset: 点标记显示位置偏移量。默认Pixel(-10,-34)
                icon:点标记显示的图标,有合法的content时icon无效
                content:点标记显示的内容
                draggable:点标记是否可以拖拽移动，默认false
                cursor:指定鼠标悬停时候的默认鼠标样式
                raiseOnDrag:设置点标记是否可以开启点标记离开地图的效果
                label:{    添加文本标注
                content:'附近的空间付款',   //文本内容
                offset: new AMap.Pixel(-13, -30),  //文本偏移量
                direction：方向
            }
            map.add(marker);
        */
        var marker = new AMap.Marker({
            position: map.getCenter(),
            offset: new AMap.Pixel(-13, -30),
            // 设置是否可以拖拽
            draggable: true,
            cursor: 'move',
            // 设置拖拽效果
            raiseOnDrag: true,
            label:{
                content:'附近的空间付款',   
                offset: new AMap.Pixel(-13, -30),
            }
        })