vue2整合高德地图JS API v2.0页面不展示问题也没有任何报错(MOCKJS冲突)

最新推荐文章于 2024-07-30 10:12:51 发布
最新推荐文章于 2024-07-30 10:12:51 发布
阅读量1.8k 收藏 1
点赞数 5
分类专栏： vue2 文章标签： javascript vue.js 前端 高德地图JS API v2.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31745863/article/details/129397090
版权
在Vue2应用中整合高德地图JSAPIv2.0时遇到页面无显示且无报错的情况，可能的原因是项目中使用了mockjs。Mockjs会修改请求头信息，导致地图数据加载失败。解决方法是移除mockjs相关依赖。
摘要由CSDN通过智能技术生成

vue2整合高德地图JS API v2.0页面不展示问题也没有任何报错

在这里插入图片描述
如果一下内容中都是正确的
在这里插入图片描述

那么检查一下vue项目中是否使用过mockjs如果使用了mockjs只需要去除mockjs相关依赖即可

原理:mockjs会修改地图数据请求的头信息。

_院长大人_
关注
专栏目录
VUE+js高德地图2.0API两幅地图联动同步缩放
sinat_36819507的博客
03-17 1555
<template> <div> <br> <div id="container"></div> <!-- <div class="info">--> <!-- <h4 id="text"></h4>--> <!-- <p>当前级别：<span id="map-zoom">15</span></.
vue.js高德地图实现热点图代码实例
10-17
在本文中，我们将深入探讨如何使用Vue.js与高德地图API来实现热点图的功能。热点图是一种有效的数据可视化工具，可以展示特定区域内数据点的密集程度。以下是对标题和描述中涉及的知识点的详细说明： 1. **Vue.js**...
vue2+高德地图关键字搜索（不展示地图）
qq_39227035的博客
09-12 375
【代码】vue2+高德地图关键字搜索（不展示地图）
Vue 使用高德地图（AMap） 页面空白，什么都不显示的问题
l0511541321的博客
10-18 9342
将高德地图相关的方法改到 mounted(){}生命周期中，放到created()中不会显示出来的
关于vue开发中，高德地图有时不显示的问题
最新发布
zzzzzzzi111的博客
07-30 441
关于vue开发中，高德地图有时不显示的问题
vue3项目里关于mock.js和高德地图冲突问题
zhihua1231的博客
04-19 841
但是又有新问题 版本是1.4.15的 关于鹰眼和搜索提示的 api也要更换 （具体需要参考高德地图官网 1.4的版本）关于项目里有mock.js 引入2.0版本的高德地图 不加载地图原因是：mockjs会修改地图数据请求头的信息。2、或者把高德地图的版本降成1.4.15。1、直接把mock.js代码注释掉。
[高德地图] vue 地图显示不出来
qq_14993591的博客
03-23 2727
解法：mouted钩子中实例化地图（解决地图容器为空的问题），destroy钩子中 destroy地图实例（解决栈溢出的问题） 使用vue做的SPA切换路由地图第二次显示不出来
vue2实现高德地图 JSAPI 2.0海量点标记(标注和标注图层)-＞自定义点位-＞定时刷新点位
qq_31745863的博客
05-11 3519
1. 需要修改`securityJsCode`和`key`为自己的 2. `allowCollision`为标注是否避让marker,默认为false不避让 3. `markers`为地图上的标记数组 4. `layer`为一个标注层,可以理解为一个图层 5. 流程其实就是将`markers`装载到`layer`再将`layer`装载到map就可以实现了
vue.js 2.0的一些变化（一、基本API）
前端迷宫
08-31 541
全局配置 Vue.config.silent Vue.config.optionMergeStrategies Vue.config.devtools Vue.config.errorHandler（新API，全局的挂钩用于在组件渲染和监控的时候处理未捕获的错误） Vue.config.keyCodes（新API，为v-on配置自定义的key的别名） Vue
vue中使用高德地图（JSAPI2.0示例）
04-28
参考高德地图官网的示例实现的。
vue基于Vue2.0和高德地图的地图组件实例
08-30
vue-amap 是一个基于 Vue 2.0 和高德地图的地图组件实例，旨在让开发者在编写地图应用时，能够从查找众多地图 API 和繁琐的地图状态同步中解脱出来。vue-amap 通过提供简洁的 API 和强大的功能，帮助开发者快速构建...
vue中使用高德地图，只加载出地图logo，地图没有加载出来
yookooi
06-05 1494
在使用vue开发的过程中，需要使用到高德地图，但按照高德地图的官方文档配置后，只显示高德地图的logo，但是始终加载不到地图。
vue3在高德地图首次加载成功后，第二次加载容器消失，后续加载抛出map实例为空问题解决
weixin_43996368的博客
03-28 1278
这里的加载方法在其他项目里都是正常了，这次放入微服务里运行的时候发现多次加载地图会出现各种问题，采用新的JS API 2.0 版本中的JSAPI Loader进行加载。原先加载方式为JS API 引入地图。
vue 弹窗_vue使用vue-AMap附加弹窗消息
weixin_39815600的博客
12-12 906
npm下载插件npm install vue-amap --save 在App.vue中写入 <template> <div id="app"> <div class="amap-page-container"> <div class="toolbar"> 当前坐标: {{ lng }}, {{ lat }} ...
基于Vue2.0和高德地图的地图组件实例
0303
07-20 1287
vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库。申请高德地图账号和key。
在vue种使用高德地图
qq_36813076的博客
06-22 1164
cnpm下载amap-jsapi-loader之后在你所需要渲染地图的页面引入相应的依赖 2，开始加载地图，切记你需要申请高德地图开发者模式的key，怎么申请就不赘述了，自己百度一大堆，废话不多说，直接上代码 备注：plugins这个数组里边是地图的插件，比如你需要在地图上加载区县或者乡镇边界，那就将AMap.GeoJSON，AMap.Polygon这两个插件写进去，可以按需写入，记住他有很多插件可供使用...
项目中使用高德地图, 地图加载不出来,只有高德Logo
a42558444的博客
03-03 1808
项目是vue2的，我把相同的代码复制到另外一个项目中，发现可以正常显示。 如果出现类似情况，请检查你是否使用了mockjs，我吧mockjs关闭后地图就正常加载了, 如果出现地图不能加载控制台报错, Invalid Object: LngLat(NaN, NaN), 很有可能是你的地图容器也就是container的DIV没有设置宽高, 以上是我遇到的问题, 希望可以帮到你
【已解决】map container is already initialized——页面切换瓦片图不出来的问题
木得是的博客
08-10 1497
vue中页面间切换之后瓦片图就不见了，还报 map container is already initialized。解决办法如下
加载高德地图js和jquery冲突的问题
chenhq_的博客
12-09 4026
在使用load(url)加载页面的时候，如果是调用了外部的js文件如高德地图，可能会和项目里的jquery冲突，此时可以将此放在jquery前面先加载。
vue2高德地图搜索城市报错,具体位置不报错
02-06
如果确定以上情况都没有问题，可以尝试更新地图API的版本或者查看高德地图开发文档中的相关说明，找出可能导致搜索城市报错的原因并进行修复。 需要注意的是，如果具体位置不报错，可能是因为该位置的经纬度信息...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值