uniapp使用高德的离线地图

最新推荐文章于 2025-03-11 15:33:35 发布

KF_19924636653

最新推荐文章于 2025-03-11 15:33:35 发布

阅读量2.2k

点赞数 2

分类专栏：前端 html 面试文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_54854317/article/details/123100163

版权

本文介绍了在uniapp中使用高德离线地图的方法，通过openlayer加载离线瓦片来实现无网环境下的地图查看。内容包括瓦片的下载、ol.css和ol.js的引入、uniapp manifest.json的配置以及在test.vue组件中的具体代码实现。

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

uniapp使用高德的离线地图

需求分析：使用uniapp开发原生android和ios，要做一个离线地图的操作，无网的情况下能正常查看地图，只是前期的demo演示，不做特别详细的说明

使用高德地图相关的配置和申请去官网就可以（不想细说）
使用openlayer
使用原生sdk封装高德的离线地图在uniapp中用

第一种：使用openlayer加载离线瓦片

瓦片需要自己去下载
ol.css和ol.js两个文件我们可以到官网去下载源文件。
官网地址：

前期准备工作自行度娘吧，直接上demo

uniapp中mainfest.json中将高德的相关配置配上之后
在css文件中引入ol.css,在js文件中引入ol.js
新建存瓦片的文件夹，tiles里面放下载的瓦片
新建一个test.vue测试demo

在这里插入图片描述

test里面代码：

<template>
	<view class="container">
		<view id=&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KF_19924636653

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【实战教程】Uni-App开发：轻松集成高德地图，实现精准位置选点功能

luhanglh的博客

07-15

8448

【实战教程】Uni-App开发：轻松集成高德地图，实现精准位置选点功能。 uni-app实现高德地图选点功能

uniapp 申请高德地图应用的KEY

weixin_46814321的博客

02-13

2362

uniapp 申请高德地图应用的KEY

6 条评论您还未登录，请先登录后发表或查看评论

高德地图api离线化，支持uniapp，web，触屏操作

04-25

高德api离线化，支持uniapp，web，触屏操作根据高德api JS文件进行离线化操作

uniapp结合高德地图实现地图随机选点（高德地图 ‘AMap is not defined’ 问题的解决）

最新发布

m0_51403535的博客

03-11

988

结合高德地图实现地图随机选点（高德地图 ‘AMap is not defined’ 问题的解决）

Uniapp离线打包使用高德地图教程及常见问题

assessea的博客

12-22

2668

uniapp项目离线打包使用高德地图的相关配置教程及常见问题解决方法

Uniapp中使用高德地图，并在android studio中离线打包

baidu_35753600的博客

01-10

5283

Uniapp中使用高德地图，并在android studio中离线打包带高德地图功能的Uniapp的android离线打包1. Uniapp中使用高德地图的方式一2. 高德地图中申请key3. uniapp中的设置4. 自己实现 uni.chooseLocation6. HBuilder-Integrate-AS 中的设置6.1. AndroidManifest.xml的修改6.2. dcloud_properties.xml的确认6.3. lib中aar的复制7.在 HBuilder-Integrat

使用Vue与UniApp结合高德地图实现离线地图与经纬度标注的开发实践

chenchuang0128的博客

11-16

1289

为了应对这些挑战，高德地图提供了离线地图功能，允许开发者在设备本地存储地图数据，实现无网络环境下的地图使用。通过Vue与UniApp结合高德地图SDK，我们可以实现一个基本的离线地图应用，并在其上添加基于经纬度的标注功能。然而，需要注意的是，离线地图的集成和使用相对复杂，需要开发者对地图数据和SDK有较深的理解。离线地图的加载：高德地图SDK本身并不直接支持传统意义上的“离线地图”加载。然后，在平台提供的离线地图工具中下载你需要的地图数据，并将其存储在你的应用或设备的适当位置。

uniapp高德离线地图

01-22

### 实现 UniApp 中集成并使用高德离线地图 API #### 设置与配置在 UniApp 项目中集成了高德离线地图功能，主要涉及几个方面的工作： - **申请高德地图 Key** 为了能够正常使用高德的地图服务，在官方平台注册...

UniAPP 使用高德地图，打包后定位api不执行

arsdar的博客

09-17

2163

最近开发项目遇到了使用地图持续性定位场景，首先会考虑使用百度或者是高德。下边描述下本人在实际开发中遇到的问题。 1、使用百度定位百度定位真机调试和打包时都很顺畅，没有遇到不能调用或者打包失败的问题。但是，发现在百度地图打包之后偶尔出现坐标系错乱的问题。有的时候打包后显示点位是百度坐标系，有时候打包后显示的是GCJ02坐标系（此问题也许仅在本人使用环境下产生，如您的开发过程中没有复现勿喷！）。因此转而投向高德。 2、使用高德地图使用高德地图后，真机调试一切顺利，而且感觉定位精度要比百度高（有可能是

uni-app 离线打包时，访问高德地图和 uni.chooseLocation 打开地图权限配置问题

qq_26726121的博客

08-02

162

转载 https://blog.csdn.net/miqibumiaowu/article/details/134057509。

uniapp 离线打包使用系统定位，无需注册高度、百度地图

weixin_45784582的博客

04-09

4386

问题：最近因为公司需求，放弃高德、百度地图的定位，使用系统定位来进行APP的定位功能开发；前端只能获取定位的经纬度，处理办法一般是通过第三方的sdk或后端接口来进行经纬度的中文地址解析. 解决办法：由于环境原因，以上方式都不行；安卓开发是没有以上问题的，可以对系统定位的经纬度进行中文解析，两者结合问题奇迹般解决了 1、在Android Studio 配置 AndroidManifest.xml文件中的系统定位的权限离线打包系统定位配置  <use

uni-app 安卓本地打包时，访问高德地图和 uni.chooseLocation 打开地图权限配置问题

miqibumiaowu的博客

10-26

1612

"uni.chooseLocation" 打开地图，并可以选择一个定位。uniapp的一个组件，用 nvue页面实现的。高德地图使用的 appkey 和打包使用的包名及签名文件存在对应关系，填写时请注意。填写错误会导致地图无法正常使用。"uni.openLocation" 打开地图，显示坐标位置。"uni.getLocation" 获取当前设备的定位信息。

uniapp 整合 OpenLayers - 加载Geojson数据(在线、离线、点选、点选位置导航)

qq_19688207的博客

10-14

903

因为,打包后app文件夹中，WWW文件目录没有了，这样就会导致openlayer的相对路径失效，从而无法加载离线地图。在官方基座，上面的代码运行没有问题，但是打包的APP就无法加载离线地图了。manifest.json添加配置。

uni-app map高德升级、离线设置个性化地图、样式文件、主题色、可使用nvue map所有

杨克进的博客

05-05

979

map高德升级、离线设置个性化地图、样式文件、主题色、可使用nvue map所有

uni使用openlayer加载本机离线地图

qq_22266389的博客

02-04

833

【代码】uni使用openlayer加载本机离线地图。

UniApp 制作高德地图插件

wangdaoyin2010的专栏

08-17

2403

注意：使用同一个Key在AS中调试下载等正常，因为在AS中使用的是调试模式，然后SDK中带了调试证书，所以可以正常下载。打包成SDk后放到Uni中生成自定义基座进行调试，这样在高德地图SDK这块就是使用的是你自己配置的ApiKey证书，所以如果这个证书配置错误就出现下载失败。解决思路：不适用高德离线地图组件，通过如下代码手动下载，在OfflineMapManager第二个参数对应类的onDownload方法中可以查看具体的错误代码是多少。问题：so文件引入错误，按照官网方法1引入sdk(so文件)，

uni-app web-view导入地图

m0_60910195的博客

08-27

1484

记录下webview中调用谷歌地图的方法： uni-app的官方说法是: 这边使用第1种方法，就不用插件了。注：调用谷歌地图，首先需要翻墙 1，首先申请谷歌帐号，这里申请步骤就不赘述了。 2，其次申请谷歌秘钥：平台地址：https://developers.google.cn/maps/gmp-get-started 选择Maps JavaScript API：https://console.cloud.google.com/google/maps-apis/new?project=fl.

【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录，比如打包后定位失效、

qq_51055690的博客

01-14

8429

uniapp打包成安卓app中的高德地图踩坑实践 uniapp使用高德地图打包成安卓app