VUE引入高德地图

一：最直接的方法就是在项目的public文件夹下的index.html中直接引入

 二：创建你的地图组件引入即可

<template>
  <div>
    <div :id="mapId"></div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      mapId: 'cesiumContainer',
      map: null, // 地图实例
      },
    }
  },
  mounted () {
    this.initGaoDeMap();
  },
  methods: {
    // 初始化高德地图
    initGaoDeMap () {
      let _this = this;
      _this.map = new AMap.Map('cesiumContainer', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        skyColor: '#00162E', // 天空颜色
        mapStyle: "amap://styles/dark",
        rotateEnable:true,
        pitchEnable:true,
        zoom: 12,
        rotation:-15,
        pitch: 45, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode:'3D',//开启3D视图,默认为关闭
        buildingAnimation:true,//楼块出现是否带动画
        expandZoomRange:true,
        zooms:[3,20],
        center:[79.074395,39.868951]
      });

      // 控件
      _this.map.addControl(new AMap.ControlBar({
        showZoomBar:false,
        showControlButton:true,
        position:{
          right:'1200px',
          top:'10px'
        }
      }));
    },
  },
}
</script>

作者原文地址：我的个人日志