vue使用百度地图GL 卫星地球地图 避坑一 BMAP_EARTH_MAP出现 undefined报错的问题

最新推荐文章于 2024-05-08 21:39:03 发布
最新推荐文章于 2024-05-08 21:39:03 发布
阅读量3.1k 收藏 2
点赞数 7
分类专栏： 百度地图 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Brella_M/article/details/121018867
版权

使用百度地图实现卫星地图功能：
在这里插入图片描述

bmapgl示例中心中关于地球的示例是这么写的：
在这里插入图片描述

但是在使用的时候你就会发现，这个东西已经改名了，所以会报错undefined

你可以改成这个试试：

   this.map.setMapType('B_EARTH_MAP');// 设置地图类型为地球模式

或者打印一下你的实例化map找一下这个东西的名字有没有存在：
在这里插入图片描述

杨曙曙
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
'BMap' is not defined 导致百度地图无法正常显示的解决方案，亲测有效！
Meng_qi8816的博客
04-03 9946
友情提示：在正常安装导入后调用百度地图，页面仍无法正常显示出地图画面的前提下，请继续尝试下面两种解决方案！终端接入百度地图的方法 方法一：异步加载（Vue项目） 第一步：注释之前在index.html中引入的百度地图（如没有，请忽略，继续往下看！） 第二步：新建一个 map.js 文件 跟入口 js（main.js）一样，同一级目录新建一个 map.js （ak 就是你的密钥） map.js 中...
vue 地图组件（地球模式）
huanxiang121的专栏
10-28 5505
地图组件（地球模式） 本组件是在项目中创建地图，获取地图上的位置信息 下面是地图展现形式： 组件使用方法： 在index.html引入百度地图脚本（注意引入顺序） <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script> <script...
sb-map.rar（Vue + elementUI +百度地图基础项目）
08-04
Vue + elementUI +百度地图基础项目
Web前端最全vue+echarts 区域地图绘制（街道）_echarts地图分块，计算机专业必看
最新发布
2401_84617131的博客
05-08 989
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。下载到文件后，打开geojson.io。
百度地图更改地图模式
weixin_45816407的博客
05-23 531
3.普通卫星地图：BMAP_SATELLITE_MAP。1.标准地图：BMAP_NORMAL_MAP。2.地球模式：BMAP_EARTH_MAP。
'BMap' is not defined 解决方案
热门推荐
aGreetSmile的博客
09-26 1万+
webpack 配置文件 如果只是第一步，你调用百度地图api时，报错：Bmap is not defined，那么就配置 webpack 配置文件**（webpack.base.conf.js）的module.exports中加个externals：** module.exports = { context: path.resolve(__dirname, '../'), entry...
H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）
小白小白从不日别的博客
07-19 3311
百度地图API的基本使用
vue-bmap-gl是一套支持Vue2Vue3和百度地图WebGL版本的地图组件
04-13
vue-bmap-gl是一套支持Vue2、Vue3和百度地图WebGL版本的地图组件。vue-bmap-gl@next是一套基于Vue3 和百度GL的地图组件。 该版本对原组件进行升级，主要适配Vue3，同时调整事件绑定形式，调整为使用v-on进行事件绑定...
vue用BMap百度地图实现即时搜索功能
10-16
主要为大家详细介绍了vue用BMap百度地图实现即时搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue使用百度离线地图资源
04-25
vue使用百度地图离线资源 该文件内容须放于项目public文件夹下 使用请参考博主博客：vue使用百度地图----离线地图 https://blog.csdn.net/weixin_45660840/article/details/108977917?spm=1001.2014.3001.5502 H.F...
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
11-21
在Vue开发中，有时我们需要在地图上绘制带有方向指示的折线，比如使用vue-baidu-map库。然而，根据描述，vue-baidu-map的BmPolyline组件默认并不支持直接添加带箭头的纹理。这个问题源于BmPolyline组件的源代码没有...
vue-bmap-gl是一套支持Vue2、Vue3和百度地图WebGL版本的地图组件
01-22
vue-bmap-gl@next是一套基于Vue3 和百度GL的地图组件。 该版本对原组件进行升级，主要适配Vue3，同时调整事件绑定形式，调整为使用v-on进行事件绑定。 支持全量导入、按需导入和自动导入。vue2请使用0.x版本，对应...
VUE使用百度地图API实现三维地球
qq_42859722的博客
01-14 2882
VUE结合百度API实现三维地球
eslint语法检查及规则配置
zzy的博客
03-05 596
使用vue create 创建项目时，勾选了eslint，对vue有严格的语法检查，会因为空格和Tab出现编译错误 Mixed spaces and tabs no-mixed-spaces-and-tabs 解决方法： 打开package.json，找到eslintConfig，配置"rules" "rules": { "no-mixed-spaces-and-tabs": ["off...
vue使用百度地图GL 卫星地球地图 baidu-map-gl JavaScript API GL 球形地图的文档区分
关于我遇到的或大或小的问题
10-13 353
地图的文档很杂乱，而且排版相似，我这里写一下我看到过的，另外，百度地图gl是没有vue官方文档的，所以可能会有一些改版需要自己多加注意。
vue百度地图 一进页面加载卫星图
m0_49471668的博客
12-03 2537
<bm-map-type :map-types="mapType" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type> data() { return { mapType:['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP'], } methods:{ createMap({ BMap, map }) { //这句使得初始为卫星图 ...
百度地图
weixin_42802749的博客
04-22 868
window.onload = getMap; function getMap() { // 创建地图实例 let map = new BMapGL.Map('content'); // 创建点坐标 let point = new BMapGL.Point(121.491, 31.233); // 初始化地图，设置中心点坐标和地图级别 map.centerAndZoom(point...
Vue+Cesium：添加高德地图/百度地图/天地图
weixin_54937289的博客
11-27 3646
天地图API (tianditu.gov.cn)
解决百度地图api引入mapvgl,报Cannot read properties of undefined (reading ‘ratio‘)
qq_36406553的博客
02-16 1519
解决百度地图api引入mapvgl,报Cannot read properties of undefined (reading 'ratio')
vue3使用百度地图api报错 Cannot read properties of undefined (reading 'kc')
11-18
在Vue3中使用百度地图API报错"Cannot read properties of undefined (reading 'kc')"，这个错误通常是由于百度地图API的加载问题导致的。解决方法如下： 1. 确保你已经正确引入了百度地图API，并且API的加载是成功的。 2. 在Vue3中，可以使用`vue-baidu-map`这个第三方库来方便地使用百度地图API。你可以通过以下步骤来安装和使用它： - 安装`vue-baidu-map`库： ```shell npm install vue-baidu-map --save ``` - 在Vue3项目中引入`vue-baidu-map`： ```javascript import BaiduMap from 'vue-baidu-map' createApp(App).use(BaiduMap, { /* 这里是你的百度地图API密钥 */ ak: 'your_ak' }).mount('#app') ``` - 在Vue3组件中使用`vue-baidu-map`： ```vue <template> <baidu-map class="map" :center="center" :zoom="zoom"></baidu-map> </template> <script> export default { data() { return { center: { lng: 116.404, lat: 39.915 }, zoom: 15 } } } </script> ``` 在这个例子中，我们使用了`<baidu-map>`组件来显示地图，并通过`center`和`zoom`属性来设置地图的中心点和缩放级别。 如果你仍然遇到了"Cannot read properties of undefined (reading 'kc')"这个错误，可以尝试以下方法： 1. 确保你的百度地图API密钥是正确的，并且已经在百度地图开发者中心进行了正确的配置。 2. 确保你的网络连接是正常的，并且没有被防火墙等软件所阻止。 3. 尝试使用其他浏览器或者清除浏览器缓存来解决问题。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值