vue使用高德地图所经历的坑

最新推荐文章于 2025-05-26 15:02:04 发布
最新推荐文章于 2025-05-26 15:02:04 发布
阅读量2.3k 收藏 5
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/StanYang2019/article/details/105065110
本文介绍了一种在项目中局部而非全局使用高德地图的方法，避免了在index.html中直接引入导致的mapisnotdefined错误。通过将地图功能封装为独立的js文件，实现了按需加载，提高了项目的灵活性和效率。

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

我遇到的场景是项目局部使用高德地图而不是整个项目依赖于高德地图，所以不要在index.html中引入高德地图，如果全局引入在index.html中，会报一个map is not defined,因为这时高德地图还没完全引入进来，应该异步引入，即把方法封装成一个js文件，然后就是哪里需要哪里引入，详情可以看一下代码。。。
封装的js
哪里需要哪里引入
在这里插入图片描述
这样高德地图就引入成功了，map是我全局生命的一个变量，小伙伴们别忘了哦

关于高德地图2.0卡顿问题的解决方案（chrome设置+显卡设置）
小陈的博客
09-15 1万+
最近笔者开始接触高德地图，发现了一种情况：不论是项目上还是高德官方，2.0版本均存在自定义地图在操作时非常卡顿的现象，而1.4.15版本却仍旧流畅。项目上存在的“多个接口多个文件调用时阻塞地图活动”情况暂且不论，本文只讨论如何通过改变chrome浏览器及系统显卡的设置发挥其应有的性能，让地图操作回归原本流畅的体验。
3倍+提升，高德地图极致性能优化之路
高德技术
01-15 8376
1.导读随着移动互联网的成熟发展，移动应用技术上呈现出多样化的趋势，业务上倾向打造平台及超级入口，超级应用应运而生。但业务快速扩张与有限的系统资源必然是冲突的，如何实现多（能力服务的高增...
高德地图和flexible适配
墨迹斑斑的老墙
05-22 1266
高德地图在webapp中如何适配rem？ 问题 就目前所知高德和百度地图并没有为rem单位提供适配方法。看到此处不要急，且让我慢慢道来！ 我在项目中使用的是淘宝flexible适配rem的方案，原本是适配dpr分别是1、2、3的情况下，但是在dpr=3时，地图文字太小。 然后看到高德地图在使用时有font-size设置。内心有些happy，企图利用font-size来适配。but...然并
移动端H5页面引入高德地图的一些问题记录
123
07-07 575
思路：先让地图的div宽高为200%（自己可根据需求自定义），再使用transform: scale(0.5) translate(-50%, -50%);来进行缩放，简不简单？这时的zoom只能控制地图的缩放，因为移动端的宽度相较于web端还是比较小的，如果让移动端即保证zoom值一样，还显示的范围更大。
vue中，高德地图api实现地图定位和根据关键字搜索周边功能
最新发布
m0_49262795的博客
05-26 346
本文介绍了在Vue项目中集成高德地图API实现定位与周边搜索功能的完整方案。主要内容包括：1）环境配置与API Key申请；2）地图基础模块搭建，使用AMapLoader加载地图并添加标记；3）定位功能实现，集成浏览器地理定位API并处理回调；4）周边搜索开发，支持关键词搜索和分页查询。文章提供了详细的代码示例，涵盖地图初始化、定位标记、信息窗体展示等核心功能，并演示了如何通过高德API实现位置搜索与结果展示。该方案适用于需要地图功能的Web应用开发。
如何在 vue 项目中引入高德地图
qczzc的博客
08-13 1689
相信在 web 开发中有不少项目都用到过地图，那么我们怎么在自己的项目中引入第三方地图呢？提示：以下是本篇文章正文内容，下面案例可供参考。
vue中引入高德地图
热门推荐
前端-尔嵘
12-31 2万+
总的来说，vue组件中使用高德地图的方式有两种，一种是vue-amap ：一套专门用于vue的高德地图插件；另外一种是原生的高德地图。 方式一、vue-amap： 官网API：直达车 (1)、安装依赖： npm install vue-amap -S 或者淘宝镜像： cnpm install vue-amap -save 亦或（CDN的方式获取最新版本的资源）： <sc......
vue使用原生高德地图
weixin_45799605的博客
11-26 1947
在index.html 中引入 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的key值&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script> &lt...
深入解析：Vue中高德地图定位准确性提升的终极方法
本文首先介绍了Vue中地图定位的基础知识和高德地图API的集成与配置方法，然后深入探讨了提升定位准确性的核心策略，包括硬件与网络因素、定位算法的优化和高级定位技术的应用。接着，文章详细阐述了Vue中高德地图...
高德地图图层控制：Vue中的高级交互设计与策略
本文探讨了高德地图与Vue框架集成后的图层控制技术，系统阐述了地图图层的理论基础和Vue中图层控制的实现原理。通过对图层控制组件的开发、动态图层渲染技术以及图层控制策略的实践，提供了具体的实现方法和优化策略...
坑死我的高德地图之：PlaceSearch.clear()
whl223的专栏
09-04 4700
        高德地图JS-API，使用PlaceSearch搜索地址，在地图上产生Marker，但是在调用PlaceSearch.clear()之后，Marker并没有被清除。这个问题困扰了我好几天了。高德官方参考手册相当简单：      https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch ...
高德地图使用vue-amap开发 页面刷新地图空白
qq_40121308的博客
10-19 6863
使用vue-amap地图开发的时候，刷新页面地图就不显示了。因为刷新的时候AMapUI没有加载出来导致地图显示空白。 使用remoteLoad 来解决 // remoteLoad.js export default function remoteLoad(url, hasCallback) { return createScript(url) /** * 创建script * @param url * @returns {Promise} */ function cr
QWebEngineView 拖动高德地图时画面抖动
weixin_41634883的博客
02-01 624
Release模式:界面刷新不卡顿，但拖动地图时，内容标注会有明显抖动。通过以下代码指定渲染方式，需要在Application创建前声明。在做地图开发时,使用 QWebEngineView 加载高德地图。Debug模式:无抖动问题，可能是因为界面整体刷新卡顿没看出来。解决方案：修改Qt的默认渲染方式,使画面渲染速度更快,不抖动。加载百度地图时，发现拖动地图标注物不会抖动。
vue 使用高德地图、腾讯地图 实例化对象报错或地图异常
MorrisGeek的博客
06-09 3328
vue 中使用地图的时候，实例化的对象用 data 或 ref 、reactive 来管理会导致报错。大概原因是地图对象内部处理与 vue 冲突，目前在高德、腾讯都碰到了，各厂应该都会有类似问题。
学习笔记——vue中使用高德地图中轨迹回放时，小车移动速度过快问题
qq_41339126的博客
05-10 5394
问题：在vue中，使用高德地图中的轨迹回放，来展现小车的移动轨迹。但是小车移动速度过快，修改moveAlong()中的参数也没用。 首先，需要进入高德开放平台，注册并登录控制台。在应用管理=>我的应用中创建一个应用。在新创建的一个应用中添加一个key。 1.引入高德地图： 1.npm下载 npm i vue-amap --save 2.main.js导入 import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.initAMap.
VUE中使用高德地图（原生UI，信息窗体内部事件监听）
H5女王范儿
06-03 2353
VUE中使用高德地图（原生UI） 先吐槽一下，本人的环境是基于vue3.0的项目，上一位参与项目的同事使用的事vue-amap，因工作需要，另外一位同事去了别的项目，所以这个万恶的项目由本人自己维护，就是再本周新增了需求，根据不用大区的用户进入到系统，显示不同的地图边界。 由也正因为于本人能力有限，未能基于vue-amap实现新增的需求，所以考虑使用原生UI功能，但因为引入原生UI与与原生UI冲突...
vue中引用高德地图
xy19950125的博客
10-20 2631
1.vue-cli中使用 1 找到builds文件夹下的 webpack.base.conf.js  2 找到里面的 module.exports 添加  externals: {      'AMap': 'AMap' } 3 在index.heml中引入 &lt;script src="https://webapi.amap.com/maps?v=1.4.10&amp;key=您...
vue开发：vue调用高德地图
Generon的博客
07-10 1万+
前言：在之前的博客中，有成功引入高德地图，这是以前的地址  vue 调用高德地图。 因为一些需求，需要使用到地图的周边功能。 完整的项目代码请查看  我的github 一 、先看要实现的结果，参考了链家的周边，如图所示。  二 、原理分析 1、引入高德api，这个在之前的博客提到过，vue 调用高德地图。 2、使用地图的周边插件，这是  高德网站的api
vue引入网络第三方js（引入高德地图为例）
lovlin_l的代码世界
02-11 1万+
1.界面引入组件remoteload&lt;!-- 描述：拖放地图组件，默认尺寸是 500 * 300 接收属性参数： lat: 纬度 lng: 经度 自定义事件： drag: 拖放完成事件 示例： &lt;mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"&gt;&lt;/mapD...
vue 与H5 等页面使用 js 方式引入 高德地图插件--填坑记录
weixin_44863881的博客
11-05 473
项目场景： 引入高德插件，显示固定目的地 问题描述： 本地显示点位正常，打包部署后，提示 AMap undefined //前端报错 ReferenceError: AMap is not defined //引入代码 let map = new AMap.Map('container', { center: location, resizeEnable: true, zoom: 30 }); 原因分
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值