Riniac 2022-05-04 00:13 采纳率: 0%
浏览 1221
已结题

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')

img

  • 写回答

5条回答 默认 最新

  • hyh123a 全栈领域新星创作者 2022-05-04 09:11
    关注
    获得2.50元问题酬金

    创建地图实例用这个

     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)
          })
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 5月12日
  • 修改了问题 5月4日
  • 修改了问题 5月4日
  • 修改了问题 5月4日
  • 展开全部

悬赏问题

  • ¥25 LT码在高斯信道下的误码率仿真
  • ¥45 渲染完成之后将物体的材质贴图改变，自动化进行这个操作
  • ¥15 yolov5目标检测并显示目标出现的时间或视频帧
  • ¥15 电视版的优酷可以设置电影连续播放吗？
  • ¥50 复现论文；matlab代码编写
  • ¥30 echarts 3d地图怎么实现一进来页面散点数据和卡片一起轮播
  • ¥15 数字图像的降噪滤波增强
  • ¥15 心碎了，为啥我的神经网络训练的时候第二个批次反向传播会报错呀，第一个批次都没有问题
  • ¥15 MSR2680-XS路由器频繁卡顿问题
  • ¥15 VB6可以成功读取的文件，用C#读不了