引入百度地图提供的JS

//nuxt.config.ts 配置项  
// https://nuxt.com/docs/api/configuration/nuxt-config    官方文档
app:{
    head:{
      script: [
        {src: "https://api.map.baidu.com/api?v=你的key"}
      ]
    }
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

创建一个具有宽高的盒子

      <div id="map">
      </div>
  • 1.
  • 2.

新建一个地图实例 并配置

import { onMounted } from 'vue';
onMounted(async () => {
  var map = new BMap.Map('map', {
    enableHighResolution: true
  })
  // 中心点
  var point = new BMap.Point(108.273306,22.854369)
  map.centerAndZoom(point, 18)
  map.enableScrollWheelZoom(true)
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

当然我从网上看到了另一种方法

const LoadBaiduMapScript = () => {
  const AK = '你的'
  const BMap_URL = 'https://api.map.baidu.com/api?v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback'
  return new Promise((resolve, reject) => {
    // 如果已加载直接返回
    if (typeof BMap !== "undefined") {
      resolve(BMap);
      return true;
    }
    // 百度地图异步加载回调处理
    window.onBMapCallback = function () {
      console.log("百度地图脚本初始化成功...");
      resolve(BMap);
    };
    // 插入script脚本
    let scriptNode = document.createElement("script");
    scriptNode.setAttribute("type", "text/javascript");
    scriptNode.setAttribute("src", BMap_URL);
    document.body.appendChild(scriptNode);
  })
}


onMounted(async () => {
	LoadBaiduMapScript()
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

文章可能较为简单   当然我也只是记录一下自己的成长，勿喷qwq