vue-amap简单使用

配置：

npm install vue-amap --save

【1】在main.js配置

import VueAMap from 'vue-amap'

Vue.use(VueAMap)

VueAMap.initAMapApiLoader({
    // 高德key
    key: '自己申请的高德地图的key',
    // 插件集合 （插件按需引入）
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer'],
    uiVersion: '1.0.11', // ui版本号，也是需要写，不配置不加载,
})

【2】vue文件

<el-amap vid="map" :zoom="zoom" :center="center">
              <el-amap-marker vid="marker" :position="center" :label="label"></el-amap-marker>
</el-amap>

【3】在data中配置：

zoom：地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19] 

center：地图中心点坐标值[经度，纬度]

label：{content,offset: [x, y]} （对象）添加文本标注，content为文本标注的内容，offset为偏移量，左上角为偏移量为（0,0）

      zoom: 15,
      center: [113, 22],
      label: {
        content: '地址名',
        offset: [10, -10],
      },