vue 与H5 等页面使用 js 方式引入 高德地图插件--填坑记录

项目场景：

引入高德插件，显示固定目的地

问题描述：

本地显示点位正常，打包部署后，提示 AMap undefined

//前端报错 
 ReferenceError: AMap is not defined

//引入代码
 let map = new AMap.Map('container', {
            center: location,
            resizeEnable: true,
            zoom: 30
          });

---

原因分析：

模块未正确引入，使用了网上 加入 script 标签引入等方法均无效

解决方案：

在正常引入的基础上添加VUE的引入模块,放在main.js 文件中

//高德地图

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({

  // 高德的keye

  key: 'yourkey',

  uiVersion: '1.0.11' ,// 版本号

  // 插件集合

  plugin: ['AMap.Geocoder','AMap.Autocomplete','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.Geolocation','AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],

  // 高德 sdk 版本，默认为 1.4.4

  v: '1.4.4'

})