加载高德地图js和jquery冲突的问题

最新推荐文章于 2025-06-06 11:41:46 发布
最新推荐文章于 2025-06-06 11:41:46 发布
阅读量4.1k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chenhq_/article/details/53537786
本文介绍了解决使用load(url)加载页面时可能遇到的jQuery与外部JS文件如高德地图API之间的冲突问题。通过调整加载顺序，确保外部JS文件在jQuery之前加载以避免冲突。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用load(url)加载页面的时候，如果是调用了外部的js文件如高德地图<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3>，可能会和项目里的jquery冲突，此时可以将此<script>放在jquery前面先加载。
百度地图Javascript SDK
弗里曼的小伙伴
08-20 5437
百度地图 sf2gis@163.com 2015年8月13日   1  目标：增加地图插件，完成地图功能和扩展功能。 地图功能：显示、缩放、平移。比例尺、工具条、鹰眼等工具条。绘制点、线、面等元素。图层控制。路径规划等功能。 2 原理：提供地图插件，扩展js功能。 参见：..\javascript.docx插件部分。 3 方法：百度地图Js SDK 注意：百度的文档虽然没有下载版
JS引用高德地图报错: AMap is not defined
林夕
04-19 856
【代码】JS引用高德地图报错: AMap is not defined。
高德地图加载不出来，有高德的logo,但地图一片空白
热门推荐
try
01-20 2万+
按照高德官网的文档配置地图加载，在地图上有高德的logo，但是始终加载不到地图，那么你可能遇到这个问题了，请看下面解决办法。   第一步查看：项目的build.gradle中配置的编译版本、运行版本、是不是高于27的版本。 那么你的的问题肯定是因为高版本不支持http这种不加密的协议，需要使用https加密。有两种解决办法：   第一种：将构建所用的版本调低，即可解决。 第二种：在An...
高德地图在弹窗初始化问题及解决方案JSAPI
最新发布
weixin_55493330的博客
06-06 307
文章摘要：针对高德地图弹窗二次打开加载失败问题，排查发现与数据中心点和容器高度无关，最终通过两种方式解决：1)在loader加载前调用AMapLoader.reset()重置加载器；2)在index.html中添加window._AMapConfig配置。前者是官方推荐方案，后者通过在全局配置中设置key临时解决问题。技术分析显示问题源于经纬度校验环节的配置缺失，两种方案均能使地图恢复初始状态正常显示。（150字）
vue2整合高德地图JS API v2.0页面不展示问题也没有任何报错(MOCKJS冲突)
qq_31745863的博客
03-08 2215
那么检查一下vue项目中是否使用过mockjs如果使用了mockjs只需要去除mockjs相关依赖即可。如果一下内容中都是正确的。
FK JavaScript:ArcGIS JavaScript类库加载不成功而导致的程序异常
weixin_30587927的博客
05-26 243
现象:页面加载时,有时候成功,有时候出错,出错的地方为init.js 加载esri的类库 经过仔细对比,发现出错时dojo加载的类库中,对象的很多属性都为undefined,而加载成功时,该对象的相关属性都是有值的 加载成功与否基本是随机的. 错误提示: Uncaught TypeError: Cannot read property 'toLowerCase' of null 目前遇到...
解决JS和jQuery冲突思路及解决办法
weixin_33895657的博客
05-23 213
冲突多数原因是都用到了$，导致jquery与xxx.js冲突 解决方法蛮简单的， 调整顺序，先加载xxx.js，再加载jquery.js 紧跟着，声明一下var jq = jQuery.noConflict(); 最后，把调用jQuery的$替换成jq 转载于:https://www.cnblogs.com/jkyweb/archive/2011/05/23/2054498.htm...
jQuery高德地图api调试热门商家商铺列表
10-25
要结合jQuery调试热门商家，我们需要首先引入高德地图的JavaScript库，并初始化地图实例。代码示例如下： ```javascript var map = new AMap.Map('container', { zoom: 13, // 初始化地图的缩放级别 center: [116...
高德地图报Cannot read properties of undefined (reading 'Vg')
05-10
如果高德地图的 JavaScript 文件未能成功加载，则可能导致某些全局变量或函数未定义。这可能是由于网络问题、脚本路径配置不正确或其他资源加载异常引起的[^1]。 ```html 您的密钥"> ``` 确保引入的地图 API 脚本 ...
高德地图 TypeError: Object(...) is not a function
03-28
- **问题原因**：与其他库（如jQuery、UI框架）的全局变量冲突可能破坏高德API的上下文。 - **解决方法**： - 使用`非压缩版API`并通过`window.initAMap`回调确保加载顺序： ```html 您的Key&callback=initAMap...
【异步编程指南】：高德地图API异步调用的高效实现
本文首先介绍了异步编程的基本概念和高德地图API的基本信息，随后深入探讨了高德地图API的异步调用机制及其在实际开发中的实现。通过分析异步调用的工作机制和处理流程，本文提供了核心代码实现的指导和高级应用的...
jquery与js函数冲突的两种解决方法
unity3d学习者
09-10 1350
如果您还有别的要求，想继续使用原先的$()，同时还需要与别的类库不冲突的话，还有两种解决方法 其一： jQuery.noConflict(); jQuery(function($) { $("p").click(function() //在函数内继续可以使用jquery类库的$()方法 { alert($(this).text()); }) }) var JsCOM_cr = $("cr"
项目中使用高德地图, 地图加载不出来,只有高德Logo
a42558444的博客
03-03 1993
项目是vue2的，我把相同的代码复制到另外一个项目中，发现可以正常显示。 如果出现类似情况，请检查你是否使用了mockjs，我吧mockjs关闭后地图就正常加载了, 如果出现地图不能加载控制台报错, Invalid Object: LngLat(NaN, NaN), 很有可能是你的地图容器也就是container的DIV没有设置宽高, 以上是我遇到的问题, 希望可以帮到你
记录在vue项目中使用vue-amap和原生高德地图api时产生的兼容问题
FromEndToBegin的博客
07-13 1783
项目开发中，需要用到vue-amap插件的情况，但此时项目里的全局引用已经引用了高德地图2.0版本，而vue-amap只支持1.4.15（该插件作者已经很久没有维护了，不必要情况建议使用原生高德地图或者是amap-vue，注意vue-amap和amap-vue是两款插件）会产生必然的兼容问题vue-amap文档：vue-amap文档amap-vue文档：介绍 | AMap-Vue 首先，如果直接用1.14.15版本覆盖到index.html的script标签引入的话，会导致项目其他使用高德地图
html+jquery使用高德地图api
weixin_52648390的博客
04-19 989
记录一下使用高德地图的经历，高德的api写的很详细，示例贴到本地都是可以用的。文章写的不是很清晰，建议看官方文档，这里只粘贴了一部分代码。注册弹框中选择你需要的服务平台，我是分别添加了Web端(JS API)和Web服务。这个功能实现效果就是你传入起点、终点及出行方式，页面跳转到高德官方地图，并展示路线。登录高德开放平台——点击应用管理下的我的应用——添加key。新建html，引入jQuery和高德，Web端要写安全密钥。起点和终点传的都是地理编码，上面有地址转换编码的方法。的地址，接口参数写的很详细。
高德地图 Flutter 插件常见问题解决方案
gitblog_00533的博客
11-26 709
高德地图 Flutter 插件常见问题解决方案 1. 项目基础介绍和主要编程语言 本项目是一个开源的 Flutter 插件，名为 amap_map_fluttify，用于在高德地图的基础上为 Flutter 应用提供地图组件。该插件支持地图显示、定位、搜索等多种功能，并且可以与高德地图的 API 进行交互。主要使用的编程语言是 Dart，这是 Flutter 官方推荐的编程语言。 2. 新手在使用...
模态框加载高德地图时，遇到的加载失败问题
逸尘的博客
11-22 4807
模态框加载高德地图时，遇到的加载失败问题本文中将简单说一下[bootstrap][6]框架中模态框在实际应用中遇到的问题及解决方案：Qusetion 项目中使用[bootstrap][6]模态框，当点击按钮触发模态框后，在模态框中加载一个新页面，要求新页面加载出高德地图 代码如下： index.html页面代码 <!DOCTYPE html> <html> <head>
上传插件simple-uploader和mockjs中XMLHttpRequest冲突问题
zhanling1990
03-15 4651
报错内容： Uncaught TypeError: this.xhr.upload.addEventListener is not a function 错误情况： 错误原因： mockjs是一个模拟后台接口的JS库，它的原理是重写了XMLHttpRequest，它可以在接口没出来时非常方便的模拟数据，上线之后 不引用它即可。一般上报插件中会使用原生XMLHtt...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chenhq_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值