百度地图引用设置个性化

export const TDIMap = {
  init() {
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (window.T) {
        console.log('天地图脚本初始化成功...')
        resolve(window.T)
        reject('error')
      }
    })
  }
}

export const BaiduMap = {
  init: function () {
    // const BMapURL = 'http://api.map.baidu.com/api?v=3.0&ak=yr0FTvMYAK8tpkRjILGk7TihbmCfoeC1&callback=bMapInit'
    //ak 换成自己的-张
    const BMapURL = 'http://api.map.baidu.com/api?v=3.0&ak=RCLnpXmnZ8D62t5KMs9KLE44peKCH2ss&callback=bMapInit'

    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (typeof BMap !== 'undefined') {
        resolve(BMap)
        return true
      }
      // 百度地图异步加载回调处理
      window.bMapInit = function () {
        console.log('百度地图脚本初始化成功...')
        resolve(BMap)
      };
      // 插入script脚本
      let scriptNode = document.createElement('script')
      scriptNode.setAttribute('type', 'text/javascript')
      scriptNode.setAttribute('src', BMapURL)
      document.body.appendChild(scriptNode)
    })
  }
}

<template>
  <div class="mapContainer">
    <!-- <div id="tMap" /> -->
    <div id="tMap" ref="tMap" />
  </div>
</template>

<script>
import { TDIMap, BaiduMap } from "@/utils/map.js";
var $tdMap = null;

export default {
  name: "TdMap",
  props: {},
  data() {
    return {
      lat: 30.26654870969591,
      lng: 120.08263786397654,
      mapLevel: 18,
    };
  },
  mounted() {
    // this.initMap()
    this.initBaiDu();
  },
  methods: {
    initBaiDu() {
      const _this = this;
      BaiduMap.init().then((BMap) => {
        _this.map = new BMap.Map(_this.$refs.tMap);
        _this.map.centerAndZoom(
          new BMap.Point(_this.lng, _this.lat),
          _this.mapLevel
        );
        _this.map.addControl(
          new BMap.MapTypeControl({
            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], //图层类型+混合
            // mapTypes: [BMAP_NORMAL_MAP], //图层类型
            // anchor: BMAP_ANCHOR_TOP_LEFT, //切换按钮位置
          })
        );
        _this.map.enableScrollWheelZoom();
        //地图个性化
        _this.map.setMapStyleV2({
          styleId: "2ab34170567eb610404d09569833f505",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mapContainer {
  width: 100%;
  z-index: 4;
  height: 100%;
}
#tMap {
  width: 100%;
  height: 100%;
}
</style>