vue-cli3调用高德地图js接口

简单粗暴引入高德接口。

1、在高德地图开放平台创建key

（1）登录高德地图开放平台：高德地图API，使用支付宝账号登录即可
（2）进入控制台 -> 应用管理 -> 我的应用 -> 创建应用 -> 添加key

2、在index.html中全局引入接口

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=第一步中创建的key值"></script>

3、在vue.config.js中添加以下代码，使得可以全局引用AMap

module.exports = {
    configureWebpack: {
        externals: { AMap: 'AMap' }
    }
}

4、创建地图组件，引入AMap，初始化地图

<template>
  <div class="map-page">
      <div id="position"></div>
  </div>
</template>
<script>
import AMap from 'AMap'
export default {
   
  name: 'Map'