高德地图离线加载解决方案(内网部署)+本地地图瓦片加载

关键词:高德地图、离线部署、内网部署、地图瓦片

目录

鸣谢

写在前面

声明

进入主题

如何使用

写在最后


鸣谢

注意:经测试与反馈,该离线包目前无法运行至 统信UOS 和 麒麟 操作系统,正在想办法解决

2023.12.06

uos和麒麟的内网加载包由CSDN的另一个开发者弄出来了,后续我整合下发出来,最近太忙了

2024.04.09

感谢大佬ZhongruiRao提供的方案,基于此方案写了一个插件集成教程,供大家参考​ 网页链接

鸣谢:@ZhongruiRao

写在前面

近期在项目中需要用到地图,于是我选择了较为大众的高德地图,在所有的功能实现后,得到通知需要在内网进行运行,我断网测试后发现并不能离开网络。官方的插件中发送了部分网络请求,所以导致无法在内网运行(白屏)的情况,于是我通过高德在线的JS API引入外链的方式保存了相关源代码并做了修改,使其所有的网络请求均变为本地请求。

如何使用高德地图请参考官方文档:快速上手-地图 JS API 2.0 | 高德地图API

【我这里用的是高德2.0JS API,所以请查看2.0文档】

声明

  • 本离线包基于高德地图js-api2.0,在此基础进行修改。
  • 本项目仅为个人兴趣开发,不收费,作者也不提供任何付费服务。
  • 本项目仅供个人学习研究使用。
  • 本项目禁止商用,禁止在企业项目开发中使用此地图离线包,禁止使用此离线包以及基于此项目二次开发的软件从事盈利活动。

进入主题

高德离线包我已经存至Gitee(自行下载即可):高德地图离线解决方案: 高德地图离线解决方案

加载地图瓦片 (如何下载,如何加载在代码)请参考我的下一篇文章:高德地图内网加载地图瓦片、如何下载地图瓦片资源-CSDN博客
离线路径规划 可参考我的另一篇文章:Java SpringBoot项目 + GraphHopper 实现地图离线路径规划-CSDN博客

如何使用

1.将下载的离线包放到项目的public下

2.在index.html中直接加载下载的amap文件夹下的AMap3.js,其余文件不可删除!!!如下图:

3.在代码中直接new AMap即可,vue项目的话不需要再去导入map插件配置key(因为扒取这个源代码时已经利用了我申请的key),如下图直接使用即可。

引入后提示AMap不存在的,重新运行项目即可

代码如下

javascript 复制代码
let map = new AMap.Map('map-container', { // 设置地图容器id
    resizeEnable: true,
    zoom: 12,
    resizeEnable: true,
    rotateEnable: true,
    pitchEnable: true,
    center: [94.89, 36.42],
    defaultCursor: 'pointer',
    showLabel: true,  //是否显示文字标注
})

我修改的这个离线包可直接使用 绘点,绘线,动态轨迹,坐标选取 ,地图框选等基本插件,无需再做其他修改

注意:++这个离线包没有实际测试包含了哪些插件++,现在大家开发后需要断网测试一下看看哪些插件不能用,尽可能的替换掉,以免上了生产环境出现问题

目前已知反馈频率较高的是:AMap.ScaleAMap.ToolBarAMap.MarkerClusteAMap.PolyEditorAMap.MarkerCluster 这些插件不能使用,目前太忙,等有空了我把这些插件测试一下,如果不需要联网我再打进去

相关推荐
尾善爱看海2 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
驳是3 小时前
一个组件,提升 react-router 开发的幸福感
前端·preact
GreenTea3 小时前
OpenAI Agents API 上手实测:一次调用把整个 agent loop 甩给 OpenAI
前端·后端·算法
星云API技术支持3 小时前
企业微信二次开发:群权限设置、成员管理与群资料维护的接口组合实践
java·前端·企业微信
京东云开发者3 小时前
81.8 秒的视频,我们改了 15 个版本:一次纯 Codex 驱动的 AI-native 视频实践
前端·aigc
Csvn4 小时前
TypeScript 大型项目架构:从单体 tsconfig 到分层可扩展的工程
前端
计算机魔术师5 小时前
Dario Amodei 发文呼吁为前沿 AI 降速并提出三点计划
前端
计算机魔术师6 小时前
OpenAI的AI代理偷偷给RubyGems下毒,我们却毫无察觉
前端
甲维斯6 小时前
0代码,0建模,3句话开发一个3D游戏!
前端·游戏·游戏开发
IT_陈寒6 小时前
Vue的响应式更新把我坑惨了,原来问题出在这
前端·人工智能·后端