Vue3在index.html全局引入百度地图api失败怎么解决，控制台报错Cannot read properties of undefined (reading 'Map')

Vue3在index.html全局引入百度地图api失败，怎么解决
尝试过使用vue-baidu-map组件可以正常显示地图，但是发现里面没有地铁图，地铁图的相关api只能通过index.html全局引入

版本：

 "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@element-plus/icons": "0.0.11",
    "axios": "^0.21.3",
    "core-js": "^3.6.5",
    "element-plus": "^1.1.0-beta.8",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.0",
    "vue": "^3.0.0",
    "vue-amap": "^0.5.10",
    "vue-baidu-map": "^0.21.22",
    "vue-router": "^4.0.0-0",
    "vue-svg-pan-zoom": "^1.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  },

index.html代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>Foot Print System</title>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=我申请的key"></script>
    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?type=subway&v=1.0&ak=我申请的key"></script> -->
</head>

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

.vue的代码段如下：

<template>
  <!--  1. 创建地图容器元素-->
  <div class="bmap" id="container"></div>
</template>

<script>
export default {
  name: 'BmapDemo',
  mounted () {
    // 2. 创建地图示例
    var map = new window.BMapGL.Map('container')
    // 3. 设置中心点坐标
    var point = new window.BMapGL.Point(116.404, 39.915)
    // 4. 地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 15)
    // 5. 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true)
    var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    var zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)
    var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
    map.addControl(cityCtrl)
  }
}
</script>

<style scoped>
.bmap {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>

控制台报错Cannot read properties of undefined (reading 'Map')

创建地图实例用这个

 var map = new BMap.Map('allmap') // 创建地图实例

其他创建

var map = new BMap.Map('allmap') // 创建地图实例

          var point = new BMap.Point(116.331398, 39.897445) // 创建点坐标
          map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
          map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

          map.addControl(new BMap.NavigationControl())
          map.addControl(new BMap.ScaleControl())
          map.addControl(new BMap.OverviewMapControl())
          map.addControl(new BMap.MapTypeControl())
          //map.setMapStyle({ style: 'midnight' }) //地图风格

          var marker = new window.BMap.Marker(point) // 创建标注
          map.addOverlay(marker) // 将标注添加到地图中

          //提示信息
          var infoWindow = new BMap.InfoWindow('这是提示信息')
          // 鼠标移上标注点要发生的事
          marker.addEventListener('mouseover', function() {
              this.openInfoWindow(infoWindow)
          })

          // 鼠标移开标注点要发生的事
          marker.addEventListener('mouseout', function() {
              //this.closeInfoWindow(infoWindow)
          })

https://www.jianshu.com/p/4519b4b3fde4

引入map SDK不对


<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

https://blog.csdn.net/mff718/article/details/123411150

1.引入的index.js路径错了案例如下:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
  <script type="text/javascript"
    src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的keyzhi"></script>
  <!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=你的key"></script> -->

</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>


<template>
  <div>
    <!--  1. 创建地图容器元素-->
    <div
      class="bmap"
      id="container"
    ></div>
  </div>

</template>
 
<script>
export default {
  name: "BmapDemo",
  mounted() {
    // 百度地图API功能
    // var map = new BMap.Map("allmap");  // 创建Map实例
    // map.centerAndZoom("上海",15);      // 初始化地图,用城市名设置地图
    // // 2. 创建地图示例
    var map = new BMapGL.Map("container");
    // 3. 设置中心点坐标
    var point = new window.BMapGL.Point(116.404, 39.915);
    // 4. 地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 15);
    // 5. 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    var scaleCtrl = new window.BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new window.BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new window.BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);
  },
};
</script>
 
<style scoped>
.bmap {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>