vuecli引入vue-amap地图组件（高德地图SDK）

指南：组件 | vue-amap

1、前往高德开放平台注册开发者账号，在控制台申请Key

• 高德开放平台：高德开放平台 | 高德地图API
• 申请Key：获取Key-创建工程-开发指南-Web服务 API | 高德地图API

2、安装vue-amap

npm install vue-amap --save

3、在main.js中引入vue-amap

import VueAMap from 'vue-amap';
import { AMapManager } from "vue-amap";

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'XXXXXXXX',  //填写在高德开放平台获取的key
  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor'],  //按需引用插件
  uiVersion: '1.0.11' //高德ui组件库
  v: '1.4.4'  //高德sdk
});

4、应用amap地图组件（示例）

<template>
  <div style="width: 500px;height: 500px;">
    <el-amap vid="map_id" :amap-manager="amapManager" :zoom="zoom" :center="center" :events="events">
      <el-amap-marker :position="center">el-amap-marker>
    el-amap>
  div>
template>

<script>
let amapManager = new VueAMap.AMapManager();
export default {
  data() {
    return {
      amapManager,
      zoom: 16,
      center: [0, 0],
      events: {
        init(o) {
          // 自定义地图样式：https://geohub.amap.com/mapstyle/index
          o.setMapStyle(
            "amap://styles/a5a3bd8b425f872adeb4803b07da3967"
          );
        },
    },
    };
  };
};
script>

高德地图JS API参考：JSAPI结合Vue使用-JSAPI与前端框架结合-教程-地图 JS API v2.0 | 高德地图API