vue 高德地图异步引用

先建立一个文件，引入高德  gDMapLoader.js

const ak = '4e9f15de14b05fd8f19e1d8fbe91f0a3'

export default function load() {
  return new Promise(function(resolve, reject) {

    if (window.AMap) {
      resolve(window.AMap)
    } else {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = 'http://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=4e9f15de14b05fd8f19e1d8fbe91f0a3&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.PolyEditor,AMap.MapType,AMap.LabelsLayer,AMap.LabelMarker'
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }

    let mapvglScript = document.createElement('script')
    mapvglScript.type = 'text/javascript'
    mapvglScript.src =
        'https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.min.js'
    document.head.appendChild(mapvglScript)
  })
}

后面建立vue文件，使用高德

<template>
  <div class="w-h-full b-map">
    <div class="toolbar" v-if="!$store.state.release.pageMetadata">
      <Tooltip content="重置地图位置信息，恢复地图初始化时的中心点和缩放级别，当在设计器中调整地图所属布局块的尺寸之后，可以通过点击此按钮，实现地图的自动适配容器" :max-width="200" placement="right">
<!--        <Button @click="resetMap" type="primary">重置</Button>-->
      </Tooltip>
    </div>
    <div class="w-h-full map-container"></div>
  </div>
</template>

<script>
import PnDesigner from "@/utils/PnDesigner";
import gDMapLoader from "@/utils/gDMapLoader";

export default {
  name: "gDMap",
  props: {
    mapOption: {
      type: Object,
      default () {
        return PnDesigner.buildgDMapOptionConfigData()
      }
    }
  },
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      gDMapLoader().then(() => {

        let mapElement = this.$el.querySelector('.map-container');
        const elementID = this.$PnUtil.uuid();
        mapElement.id = elementID;
        this.map = new AMap.Map(elementID, {
          // restrictCenter: false,
          resizeEnable: true,
          rotateEnable: true,
          pitchEnable: true,
          pitch: 65,
          rotation: -15,
          viewMode: '3D',//开启3D视图,默认为关闭
          buildingAnimation: true,//楼块出现是否带动画
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          expandZoomRange: true,
          // center:[112.86589,27.88369],
          // zoom: 17,
          zooms:[2,20],
        });
        // 设置中心点
        this.setCenter(this.mapOption)

        // // 设置地图类型
        this.setMapType(this.mapOption.mapType)
        // // 设置主题
        this.setMapStyle(this.mapOption.stylesJson)

        //
        this.map.setStatus({dragEnable: true});
        this.map.setStatus({scrollWheel: true});
        this.map.setStatus({doubleClickZoom: true});
        this.map.setRotation(this.mapOption.heading)
        this.map.setPitch(this.mapOption.tilt)
        // this.map.setDisplayOptions({
        //   skyColors: this.mapOption.skyColors
        // })
        //

        this.mapOption.dragEnable ? this.map.setStatus({dragEnable: true}) : this.map.setStatus({dragEnable: false})
        this.mapOption.scrollWheel ? this.map.setStatus({scrollWheel: true}) : this.map.setStatus({scrollWheel: false})
        this.mapOption.doubleClickZoom ? this.map.setStatus({doubleClickZoom: true}) : this.map.setStatus({doubleClickZoom: false})

        this.$emit('on-load-map-success', this.map)
      })
    },
    // 设置中心点
    setCenter (mapOption) {
      if (mapOption.centerCity) {
        // this.map.setZoomAndCenter( mapOption.zoom,([mapOption.center[0], mapOption.center[1]]));
        this.map.setCenter(mapOption.centerCity);
        this.map.setZoom(mapOption.zoom)
      }else {
        // 同时传入缩放级别和中心点经纬度
        // map.setZoomAndCenter(14, [116.205467, 39.907761]);
        this.map.setZoomAndCenter( mapOption.zoom,([mapOption.center[0], mapOption.center[1]]));
        // this.map.setCenter(mapOption.center[0], mapOption.center[1])
        // this.map.setZoom(mapOption.zoom)
      }
    },

    setMapType (mapType) {
      switch (mapType) {
        case "BMAP_NORMAL_MAP":
          this.map.addControl(new AMap.MapType({
            defaultType:0, //0代表默认，1代表卫星
            showRoad:true//显示路况（右上角也可点击）
          }));
          break
        case "BMAP_SATELLITE_MAP":
          this.map.addControl(new AMap.MapType({
            defaultType:1, //0代表默认，1代表卫星
            showRoad:true//显示路况（右上角也可点击）
          }));
          break
        case "BMAP_HYBRID_MAP":
          this.map.addControl(new AMap.MapType({
            defaultType:0, //0代表默认，1代表卫星
            showRoad:true//显示路况（右上角也可点击）
          }));
          break
        case "BMAP_EARTH_MAP":
          this.map.addControl(new AMap.MapType({
            defaultType:1, //0代表默认，1代表卫星
            showRoad:true//显示路况（右上角也可点击）
          }));
          break
      }
    },
    // 个性化设置地图
    setMapStyle (stylesJson) {
      if (stylesJson) {
        this.map.setMapStyle('amap://styles/'+stylesJson)
      }else {
        this.map.setMapStyle('amap://styles/blue')
      }
    },

    resetMap () {
      this.map.clearMap()
    }

  },
  computed: {},
  watch: {
    'mapOption.mapType': function (val) {
      this.setMapType(val)
    },
    'mapOption.styleJson': function (val) {
      this.setMapStyle(val)
    },
    'mapOption.center': {
      handler: function (val) {
        if (!this.mapOption.centerCity) {
          this.map.setCenter((val[0], val[1]))
        }
      },
      deep: true
    },
    'mapOption.centerCity': function (val) {
      val ? this.map.setCenter(val) : this.map.setCenter((this.mapOption.center[0], this.mapOption.center[1]))
    },
    'mapOption.zoom': function (val) {
      this.map.setZoom(val)
    },
    'mapOption.heading': function (val) {
      this.map.setRotation(val)
    },
    'mapOption.tilt': function (val) {
      this.map.setPitch(val)
    },
    'mapOption.skyColors': {
      handler: function (val) {
        // this.map.setDisplayOptions({
        //   skyColors: val
        // })
      },
      deep: true
    },
    'mapOption.dragEnable': function (val) {
      val ? this.map.setStatus({dragEnable: true}) : this.map.setStatus({dragEnable: false})
    },
    'mapOption.scrollWheel': function (val) {
      val ? this.map.setStatus({scrollWheel: true}) : this.map.setStatus({scrollWheel: false})
    },
    'mapOption.doubleClickZoom': function (val) {
      val ? this.map.setStatus({doubleClickZoom: true}) : this.map.setStatus({doubleClickZoom: false})
    }
  }
}
</script>

<style lang="less" scoped>
.b-map {
  position: relative;
  .toolbar {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 3;
  }
  .map-container {
    z-index: 1;
  }
}

</style>

一个工具类 抽出高德的主要map的内容

const buildgDMapOptionConfigData = function (otherConfig = {}) {
  return PnUtil.deepMerge({
    mapType: 'BMAP_NORMAL_MAP',
    stylesJson: 'blue',
    center: [112.86589,27.88369],
    centerCity: '',
    zoom: 17,
    heading: 0,
    tilt: 30,
    skyColors: ['rgba(0,0,0,0)','rgba(33,150,243,0.3)'],
    // viewMode:'3D', //开启3D视图,默认为关闭
    dragEnable: true, // 地图拖拽
    scrollWheel: true, // 滚轮放大缩小
    doubleClickZoom: true, // 双击放大
  }, otherConfig)
}