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

本文详细介绍了如何在uniapp项目中集成高德地图,包括申请API Key、配置AndroidManifest.xml和dcloud_properties.xml,以及引入aar和jar文件。同时,针对可能出现的地图显示问题如白屏、黑屏提供了解决方案,如检查文件引入和添加jniLibs.srcDirs配置。
摘要由CSDN通过智能技术生成

一.uniapp项目打包成apk

网址:https://blog.csdn.net/zxczero/article/details/126624787

二.使用高德地图

1.申请key
网址:https://console.amap.com/dev/key/app
在这里插入图片描述
在这里插入图片描述
在我的应用中添加新应用后,点击应用后的添加按钮即可申请key

2.在项目配置文件中添加相关权限及配置
①在AndroidManifest.xml中添加相关权限及配置
在manifest下添加以下权限

	<!--允许程序打开网络套接字-->
    <uses-permission android:name="android.permission.INTERNET" />
    <!--允许程序设置内置sd卡的写权限-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!--允许程序获取网络状态-->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!--允许程序访问WiFi网络信息-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!--允许程序读写手机状态和身份-->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <!--允许程序访问CellID或WiFi热点来获取粗略的位置-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

在application下添加以下配置,注意这里的%key%要换成自己申请的高德地图的key

	<service android:name="com.amap.api.location.APSService" />
	<meta-data
	      android:name="com.amap.api.v2.apikey"
	      android:value="%key%" />

②在assets/data/dcloud_properties.xml中添加相关配置
在features下添加

<feature name="Maps" value="io.dcloud.js.map.amap.JsMapPluginImpl"/>

在services下添加

<service name="Maps" value="io.dcloud.js.map.MapInitImpl" />

3.引入.aar和.jar文件
将SDK文件夹下的libs文件夹中的所需文件复制进项目的libs中
源libs文件位置:
在这里插入图片描述

项目libs文件位置:
在这里插入图片描述
所需引入的文件内容如下:
在这里插入图片描述
完成后即可使用高德地图

常见问题:

1.地图白屏
查看.aar和.jar文件是否引入项目libs文件中
2.地图黑屏
如果使用了3D地图,则需要引入so文件
①下载地址:https://developer.amap.com/api/android-sdk/download/
在这里插入图片描述
下载完成后解压,将解压后的全部文件放入项目的libs文件夹中,将原有的.jar文件删除,替换为压缩包中的.jar文件
在这里插入图片描述
②在build.gradle文件的android中添加以下内容
在这里插入图片描述

sourceSets{
        main{
            jniLibs.srcDirs = ['libs']
        }
    }

完成后发现问题解决

uniapp中将项目打包成H5后,需要配置高德地图插件。下面是具体的配置步骤: 1. 下载高德地图插件:在uniapp的项目中,打开`src/main.js`文件,在文件中的合适位置导入高德地图插件: ``` import VueAMap from 'vue-amap'; Vue.use(VueAMap); ``` 2. 配置高德地图插件:在`src/main.js`文件的合适位置,添加一段配置代码: ``` VueAMap.initAMapApiLoader({ key: '你的高德地图AppKey', plugin: ['AMap.Geolocation', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], v: '1.4.15', uiVersion: '1.0.11', autoload: true }); ``` 将"你的高德地图AppKey"替换成你在高德开放平台申请的AppKey。 3. 在需要使用高德地图的页面中引入地图组件:在需要使用高德地图的页面,如`src/pages/index/index.vue`文件中,添加地图组件引入代码: ``` <template> <view class="map"> <amap :options="mapOptions"></amap> </view> </template> <script> import { Amap, Loca } from "vue-amap"; export default { components: { Amap, Loca }, data() { return { mapOptions: { zoom: 10, center: [116.397428, 39.90923] } }; } }; </script> <style> .map { width: 100%; height: 400rpx; /* 设置地图高度 */ } </style> ``` 其中,`mapOptions`中的`zoom`用于调整地图的缩放级别,`center`用于设置地图的初始中心位置。 配置完成后,你的uniapp项目就可以使用高德地图插件了。在H5打包后的页面中,会显示一个地图,并且可以根据之前设置的中心位置和缩放级别进行展示。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值