vue 使用高德地图

1、修改webpac.base.conf.js文件

添加：

externals: {
    
    
  'AMap': 'AMap'
}

2、在index.html引入sdk

引入有两种方式：
（1）页面直接引入（一般用这个）

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script> 

（2）异步加载

<script src="http://webapi.amap.com/maps?v=1.4.14&amp;key=您申请的key值&callback=init"></script>
<script>
    function init(){
    
    
        var map = new AMap.Map('container', {
    
    
            center: [118.68976, 32.068327],
            zoom: 6
        });
        map.plugin(["AMap.ToolBar"], function() {
    
    
            map.addControl(new AMap.ToolBar());
        });
    }
</script>

3、在当前需要加载vue页面引入与使用

<template>
  <div class='map_warp'>
    // 地图容器
    <div id="container" style="width:100%; height:600px"></div>
  </div>
</template>

<script>
// 引入 AMap
import AMap from 'AMap'
export default {
    
    
  components: {
    
    },
  data () {
    
    
    return {
    
    

    };
  },
  computed: {
    
    },
  watch: {
    
    },
  created () {
    
    

  },
  mounted: function () {
    
    
    this.init()
  },
  methods: {
    
    
    // 初始化地图
    init: function () {
    
    
      var map = new AMap.Map('container', {
    
    
        center: [118.68976, 32.068327],
        resizeEnable: true,
        zoom: 10
      })
      // 添加工具
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
    
    
        map.addControl(new AMap.ToolBar())
        map.addControl(new AMap.Scale())
      })
      var content = `
      <h3>南京江北新区人民法院自由贸易区法庭</h3>
      <p>地址：南京市江北新区滨江大道396号扬子江新金融示范区11号楼</p>
      <p>全国法院系统公益服务热线：12368</p>
      `
      // 添加点标记
      var marker = new AMap.Marker({
    
    
        position: new AMap.LngLat(118.68976, 32.068327),
        icon: '',
        label: {
    
    
          content: content,
          offset: new AMap.Pixel(-152, -170)
        },
      })
      map.add(marker);
    }
  }
}
</script>
<style lang='scss'>
// 修改点标记lable的样式
#container .amap-marker-label {
    
    
  position: absolute;
  z-index: 2;
  border: 1px solid #ccc !important;
  padding: 20px;
  h3,p{
    
    
    line-height: 40px;
  }
}
</style>