vue引入高德地图

（一）第一种script引入
1

<script src="https://webapi.amap.com/maps?v=1.4.11&key=key值"></script>
  <!-- UI组件库 1.0 -->
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

引入到index.html中

2 vue项目中build文件夹中webpack.base.config.js中加入

// 引入外部库, 无需webpack打包处理
  externals: {
    AMap: 'AMap',
    AMapUI: 'AMapUI'
  }

3 在项目中使用import AMap from AMap 即可
下图是地图热力图效果

<template>
  <div>
    <div id="container">
    </div>
  </div>
</template>
<script>
  import AMap from 'AMap'
  var map;
  export default {
    data() {
      return {}
    },
    mounted() {
      this.loadmap()
    },
    methods: {
      loadmap() {
        map = new AMap.Map("container", {
          resizeEnable: true,
          center: [116.418261, 39.921984],
          zoom: 11
        });
        var clickEventListener = map.on('click', function (e) {
          var lng = e.lnglat.getLng();
          var lat = e.lnglat.getLat();
          console.log("经度：" + lng + "纬度" + lat);
          var lnglatXY = [lng, lat];//地图上所标点的坐标
          AMap.service('AMap.Geocoder', function () {//回调函数
            var geocoder = new AMap.Geocoder({});
            geocoder.getAddress(lnglatXY, function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                //获得了有效的地址信息:
                //即，result.regeocode.formattedAddress
                console.log(result.regeocode.formattedAddress)
                //document.getElementById("address").value=result.regeocode.formattedAddress;//将获取到的地址信息赋值给文本框，保存进数据库
                var address = result.regeocode.formattedAddress;
              } else {
                //获取地址失败
                log.error('获取地址失败')
              }
            });
          })
        });

        //热力图
        var heatmap;
        map.plugin(["AMap.Heatmap"], function () {
          //初始化heatmap对象
          heatmap = new AMap.Heatmap(map, {
            radius: 20, //给定半径
            opacity: [0, 0.8]
            /*,
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
             */
          });
          var heatmapData = [{
			  "lng": 116.355675,
			  "lat": 39.870089,
			  "count": 65
			}, {
			  "lng": 116.295267,
			  "lat": 39.987171,
			  "count": 88
			}, {
			  "lng": 116.325411,
			  "lat": 39.890974,
			  "count": 90
			}];
          //设置数据集：该数据为北京部分“公园”数据
          heatmap.setDataSet({
            data: heatmapData,   //headmapData数据通过在index.html引用headmapData.js文件生成   也可以从后台传入json数据
            max: 100    //设置最大
          });
        });


        AMap.plugin('AMap.ToolBar', function () {
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar)
        })
      }

    }
  }
</script>

<style>
  #container {
    width: 100%;
    height: 300px;
    margin: 0px;
    font-size: 13px;
  }
</style>

使用之前需要安装插件
命令：npm install vue-amap --save
安装好之后npm run dev 之后报错

Can’t find Python executable “python”, you can set the PYTHON env variable

直接运行如下命令

npm install --global --production windows-build-tools

此时重新npm run dev ，
又报错webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
直接到根目录删除node_modules文件，重新npm install即可
最后npm run dev
成功（太不容易了）

（二）
第二种vue-amap 一套专门用于vue的高德地图插件 需要npm仓库安装

npm install vue-amap -save
　　然后在main.js入口文件中引入高德地图,分发出去,让每个组件都可以使用,

import AMap from 'vue-amap'

　　　　Vue.use(AMap)

　　　　// 初始化地图

　　　　AMap.initAMapApiLoader({

　　　　　　// 高德的key

　　　　　　key: 'YOUR_KEY',

　　　　　　// 插件集合

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

　　　　})

然后在组件中直接调用插件中封装好的组件就可以了,例如

<el-amap vid="amapDemo" :zoom="zoom" :center="center"></el-amap>

详情参见官方文档 https://elemefe.github.io/vue-amap/