Vue引入高德地图

方法一、直接引入法

1.第一步. script引入的方式,引入到index.html中

• 高德地图AMap,一般只需引入这个即可
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"> </script>

• 高德地图Loca，用于数据3D可视化作品绘制
  <script src="https://webapi.amap.com/loca?key=您申请的Key(必填)&v=例如1.2.0(必填，请选择最新版本号)">

• AMapUI，用于轨迹巡航，行政区聚合
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

2.第二步. vue项目中build文件夹下的webpack.base.config.js中需要配置,写在最下面’‘node{}’'中就可以

externals: {
　　'AMap': 'AMap',
　　'Loca': 'Loca',    //如果引入了Loca，再注册全局
　　'AMapUI': 'AMapUI'   //如果引入了AMapUI，再注册全局
}

3.第三步. 然后在项目中可以直接用 import AMap from AMap

  　<template>
　　　　<div id='container'></div>
　　</template>
　　<script>
　　import AMap from AMap
　　export default {
　　　　data () {
　　　　　　return {
　　　　　　　　map: null
　　　　　　}
　　　　},
　　　　mounted () {　　
　　　　　　this.map = new AMap.map('container(地图容器,id选择器)', {
　　　　　　　　content: [] 
　　　　　　　　zooms: [5-11] 
　　　　　　})
　　　　}
　　}

　　</script>

方法二、使用vue-amap 一套专门用于vue的高德地图插件

1.安装 npm install vue-amap -S

2.在main.js中引入

import AMap from 'vue-amap'
Vue.use(AMap)
// 初始化地图
AMap.initAMapApiLoader({
  　key: '自己的key',
 　 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']    // 插件集合
})

3.在组件中直接调用插件中封装好的组件就可以
<el-amap vid="amapDemo" :zoom="zoom" :center="center"></el-amap>

vue-amap参考文档
https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

参考链接： https://www.cnblogs.com/0915ty/p/9554213.html