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

带高德地图功能的Uniapp的android离线打包
- 1. Uniapp中使用高德地图的方式
- 2. 高德地图中申请key
- 3. uniapp中的设置
- 4. 自己实现 uni.chooseLocation
- 5. HBuilder-Integrate-AS 中的设置
- - 5.1. AndroidManifest.xml的修改
  - 5.2. dcloud_properties.xml的确认
  - 5.3. lib中aar的复制
- 6.在 HBuilder-Integrate-AS3.3.5 中 build 生成 apk 即可。

带高德地图功能的Uniapp的android离线打包

在Uniapp中使用高德地图，云打包的话，比较容易。使用HBuilder-Integrate-AS 进行离线打包的话，会遇到一些问题。云打包打出的apk比较小，离线打包打出的 apk 比较大，我这个app的话，云打包 24M，离线打包得将近60M。

1. Uniapp中使用高德地图的方式

在vue文件中，使用 uniapp 自带的几个方法。
（1）uni.openLocation 打开地图，显示坐标位置
（2）uni.getLocation 获取当前设备的定位信息
（3）uni.chooseLocation 打开地图，并可以选择一个定位。uniapp的一个组件，用 nvue页面实现的。

uni.openLocation({longitude: mapLocation.longitude,latitude: mapLocation.latitude,name: sectionFace.name,address: "里程号：" + sectionFace.mile
});

uni.getLocation({type:'gcj02',altitude:true,geocode:true,success: (res) => {this.hasLocation = true;this.location = res;console.log(res)},fail: (err) => {console.log(err)}
});
// 默认为 wgs84 返回 gps 坐标，
// gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标

uni.chooseLocation({success: (res) => {console.log("详细地址",res);// this.getRegionFn(res);}
})

2. 高德地图中申请key

https://console.amap.com/dev/index

3. uniapp中的设置

填写在高德地图网址上申请的key

配置相关权限，用于云打包。

4. 自己实现 uni.chooseLocation

uni.chooseLocation 功能比较单一，可以自己实现一个。
参考 HBuilder的插件市场
链接: https://ext.dcloud.net.cn/plugin?id=1899.

<template><div><!-- 标题栏 --><div class="tool-bar-fixed" ref="mapTop"></div><!-- 标题栏 --><map id="map" ref="map" offset="" :scale="scale" @regionchange="regionchange" :markers="markers" :controls="controls" :longitude="location.longitude" :latitude="location.latitude"  :style="mapStyle">     <!-- 地图中心点标记 --><image class="cover_marker" src="/static/map/position.png" :style="{'left':mapWAH.width/2-10+'px','top':mapWAH.height/2-20+'px'}"></image><!-- 定位控件 --><image class="do_get_location" src="/static/map/do_getLoction.png" @click="doGetLocation"></image></map><!-- 底部按钮 --><div class="main_bottom" ref="mapBottom"><text class="uni-btn-v" @click="savePosition">选择这里</text></div><!-- 底部按钮 --></div>
</template><script>
const dom = weex.requireModule('dom')
import permision from "@/common/permission.js"
var mapContext=null;export default {data() {return {iStatusBarHeight:0,mapStyle:{'width':'393px','height':'530px'},mapWAH:{width:0,height:0},markers:[],controls:[],scale: 15,       // 缩放级别location:{sectionFaceId: ''}};},methods: {regionchange(e){console.log(e.type)var that=thisif(e.type=="end"){mapContext.getCenterLocation({ success: res =>{ console.log(res)this.location.longitude = res.longitude;this.location.latitude = res.latitude;}, fail: err => { console.log(err); },complete:res=>{console.log(res); }})}},async doCheckPermission() {uni.showLoading({title:"定位中···"})let status = await this.checkPermission();if (status !== 1) {uni.showToast({title: "访问位置被拒绝"})return;}uni.hideLoading();}, doGetLocation() {uni.showLoading({title:"定位中···"})uni.getLocation({type:'gcj02',altitude:true,geocode:true,success: (res) => {this.hasLocation = true;this.location = res;},fail: (err) => {console.log(err)}});uni.hideLoading();},async checkPermission() {let status = permision.isIOS ? await permision.requestIOS('location') :await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');if (status === null || status === 1) {status = 1;} else if (status === 2) {uni.showModal({content: "系统定位已关闭",confirmText: "确定",showCancel: false,success: function(res) {}})} else if (status.code) {uni.showModal({content: status.message})} else {uni.showModal({title:"尊敬的用户",content: "使用本APP需要定位权限，才能正常使用！",confirmText: "去设置",success: function(res) {if (res.confirm) {permision.gotoAppSetting();}else{plus.runtime.quit();}}})}return status;},async savePosition() {console.log("保存处理！")// 保存处理let result = await this.$store.dispatch('axiosPost', {url: 'harbinMetro/sectionFace/saveLocation',data: this.location});// 保存成功提示信息if (result.success) {// 触发事件uni.$emit('chooseLocation', this.location);uni.showModal({title: '提示',content: "地图位置信息保存成功！",showCancel: false,success: (res) => {if (res.confirm) {uni.navigateBack();}}});}}},onLoad(e) {//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight//标题栏顶部距离this.doCheckPermission()//检查定位权限mapContext=uni.createMapContext('map', this)// 经纬度this.location.longitude = e.longitude;this.location.latitude = e.latitude;this.location.sectionFaceId = e.sectionFaceId;// 原来的位置固定展示var marker={latitude: this.location.latitude,longitude: this.location.longitude,iconPath: '/static/map/location.png'}var markers=[];markers.push(marker);this.markers=markers;},onShow() {//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 }, onReady() {var that=thisvar mapStyle=this.mapStyleuni.getSystemInfo({success: function(res) { // res - 各种参数var winWidth=res.screenWidthvar winHeight=res.windowHeightdom.getComponentRect(that.$refs.mapTop, option => {var topHeight=option.size.height// 地图距顶部dom.getComponentRect(that.$refs.mapBottom, option => {var bottomHeight=option.size.heightvar mapheight=(winHeight-topHeight-bottomHeight)mapStyle.height=mapheight+'px'mapStyle.width=winWidth+'px'mapStyle['margin-top']=topHeight+'px'that.mapStyle=mapStylethat.mapWAH.height=mapheightthat.mapWAH.width=winWidth})  })  }});},onHide() {//监听页面隐藏},onUnload() {//监听页面卸载},onPullDownRefresh() {//监听用户下拉动作，一般用于下拉刷新},onReachBottom() {//页面上拉触底事件的处理函数，一般用于上滑加载}};
</script><style>
/* 标题 */
.tool-bar-fixed{background-color: #ffffff;position: fixed;top: 0;left: 0;right: 0;padding: 0upx 0upx;}
/* 中心点 */
.cover_marker{position: absolute;width: 20px;height: 20px;}
/* 定位 */
.do_get_location{position: absolute;width: 40px;height:40px;right: 20px;bottom: 20px;}
/* 底部下单 */
.main_bottom{position: fixed;bottom: 0upx;left: 0upx;right: 0upx;background-color: #FFFFFF;height: 120upx;}.uni-btn-v{position: absolute;left: 40upx;right: 40upx;bottom: 20upx;background-color: #0A98D5;border-radius: 10upx;height: 80upx;line-height: 80upx;font-size: 34upx;color: #FFFFFF;text-align: center;}</style>

5. HBuilder-Integrate-AS 中的设置

我使用的是 HBuilder-Integrate-AS3.3.5。HBuilder-Integrate-AS 需要和HBuilder的版本相适应。

5.1. AndroidManifest.xml的修改

添加 uses-permission 、meta-data 和 service
com.amap.api.v2.apikey 里面就是高德地图网站上申请的 key

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /><uses-permission android:name="android.permission.READ_PHONE_STATE" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.INTERNET" /><applicationandroid:allowBackup="true"android:allowClearUserData="true"android:icon="@drawable/myappicon"android:label="@string/app_name_cn"android:largeHeap="true"android:supportsRtl="true"><meta-data android:name="com.amap.api.v2.apikey" android:value="CVDEFEVDEFDD"></meta-data><service android:name="com.amap.api.location.APSService"></service>

5.2. dcloud_properties.xml的确认

HBuilder-Integrate-AS3.3.5\simpleDemo\src\main\assets\data
dcloud_properties.xml 里面确认 Geolocation 的存在，没有的话，添加。

<properties><features><feature name="Barcode" value="io.dcloud.feature.barcode2.BarcodeFeatureImpl"/><feature name="Maps" value="io.dcloud.js.map.amap.JsMapPluginImpl"/><!--<feature name="Maps" value="io.dcloud.js.map.JsMapPluginImpl"/>--><feature name="Contacts" value="io.dcloud.feature.contacts.ContactsFeatureImpl"/><feature name="Messaging" value="io.dcloud.adapter.messaging.MessagingPluginImpl"/><feature name="Camera" value="io.dcloud.js.camera.CameraFeatureImpl"/><feature name="Console" value="io.dcloud.feature.pdr.LoggerFeatureImpl"/><feature name="Device" value="io.dcloud.feature.device.DeviceFeatureImpl"/><feature name="File" value="io.dcloud.js.file.FileFeatureImpl"/><feature name="Proximity" value="io.dcloud.feature.sensor.ProximityFeatureImpl"/><feature name="Storage" value="io.dcloud.feature.pdr.NStorageFeatureImpl"/><feature name="Cache" value="io.dcloud.feature.pdr.CoreCacheFeatureImpl"/><feature name="Invocation" value="io.dcloud.invocation.Invocation"/><feature name="Navigator" value="io.dcloud.feature.ui.navigator.NavigatorUIFeatureImpl"/><feature name="NativeUI" value="io.dcloud.feature.ui.nativeui.NativeUIFeatureImpl"/><feature name="UI" value="io.dcloud.feature.ui.UIFeatureImpl"><module name="Navigator" value="io.dcloud.feature.ui.NavView"/></feature><feature name="Gallery" value="io.dcloud.js.gallery.GalleryFeatureImpl"/><feature name="Downloader" value="io.dcloud.net.DownloaderFeatureImpl"/><feature name="Uploader" value="io.dcloud.net.UploadFeature"/><feature name="Zip" value="io.dcloud.feature.pdr.ZipFeature"/><feature name="Audio" value="io.dcloud.feature.audio.AudioFeatureImpl"/><feature name="Runtime" value="io.dcloud.feature.pdr.RuntimeFeatureImpl"/><feature name="VideoPlayer" value="io.dcloud.media.MediaFeatureImpl"/><feature name="LivePusher" value="io.dcloud.media.live.LiveMediaFeatureImpl"/><feature name="XMLHttpRequest" value="io.dcloud.net.XMLHttpRequestFeature"/><feature name="Statistic" value="io.dcloud.feature.statistics.StatisticsFeatureImpl"/><feature name="Accelerometer" value="io.dcloud.feature.sensor.AccelerometerFeatureImpl"/><feature name="Orientation" value="io.dcloud.feature.sensor.OrientationFeatureImpl"/><feature name="NativeObj" value="io.dcloud.feature.nativeObj.FeatureImpl"/>        <feature name="Geolocation" value="io.dcloud.js.geolocation.GeolocationFeatureImpl"/><feature name="Stream" value="io.dcloud.appstream.js.StreamAppFeatureImpl"/><feature name="plugintest" value="com.example.H5PlusPlugin.PGPlugintest"/></features><services><service name="push" value="io.dcloud.feature.aps.APSFeatureImpl"/><service name="Statistic" value="io.dcloud.feature.statistics.StatisticsBootImpl"/><service name="Downloader" value="io.dcloud.net.DownloaderBootImpl"/><!--<service name="Maps" value="io.dcloud.js.map.MapInitImpl"/>--></services>
</properties>

5.3. lib中aar的复制

从下面目录下找相应 aar，复制到 HBuilder-Integrate-AS3.3.5\simpleDemo\libs 目录下。
Android-SDK@3.3.5.81188_20211230\SDK\libs
※注：Android-SDK@3.3.5.81188_20211230 是从下面网站下载的HBuilder提供的Android 离线打包SDK。
链接: https://nativesupport.dcloud.net.cn/AppDocs/download/android.

amap-libs-release.aar
geolocation-amap-release.aar
weex_amap-release.aar 如果是在 nvue文件中使用高德map，需要这个aar
map-amap-release.aar 如果是在 vue文件中使用高德map，需要这个aar
※ 注：如果是在 vue和nvue文件中都有使用高德map，那就需要这两个aar
（weex_amap-release.aar 和 map-amap-release.aar）
在使用了uni.chooseLocation的情况下，因为uni.chooseLocation是nvue实现的，所以需要复制weex_amap-release.aar这个包。

6.在 HBuilder-Integrate-AS3.3.5 中 build 生成 apk 即可。

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

如何将Eclipse中的开源项目使用到Android Studio中
近几日,笔者用到了一些开源项目,比如著名的PTR项目.但是在使用的过程中,遇到了一些问题. 这个开源库是在Eclipse上面写的,我们现在开发用的是Android stuido. 两种软件的项目结构是 ...
matlab中run按钮是灰色的,Android Studio中Run按钮是灰色的快速解决方法
首先是,在不同的AS中,gradle版本不同,下载的sdk版本不同,这些,都在gradle(Project.Models)相关代码里调过来就好.之前的文章里有说过. 经过调好gradle这些文件,AS ...
【Android Protobuf 序列化】Protobuf 使用 ( protobuf-gradle-plugin 插件简介 | Android Studio 中配置插件 | AS 中编译源文件 )
文章目录一.protobuf-gradle-plugin 插件简介二.Android Studio 中配置 protobuf-gradle-plugin 插件三.Android Studio 中 ...
android studio lambda插件,在Android Studio中使用Lambda表达式（retrolambda）
在Android Studio中使用Lambda表达式要在Android Studio中使用Lambda表达式,需要借助一个gradle插件来完成. A gradle plugin for gett ...
android getter不起作用,java - 如何在Android Studio中自动生成getter和setter
java - 如何在Android Studio中自动生成getter和setter Android Studio中是否有一个快捷方式可以自动生成给定类中的getter和setter? 14个解决方案 ...
android 继承类图,Android Studio中绘制UML类图介绍
Android Studio中绘制UML类图介绍 Android Studio中绘制UML类图介绍动机最近开始阅读项目源码,从其中一个模块开始看,奈何大项目中的一个模块,对于萌新而言,也太过于复杂 ...
android如何设置自动补,Android Studio 中设置代码块自动补齐
AS中很多提示键,并不如Eclipse中做的好,需要我们自己去自定义.这里以switch...case为例,讲解一下如何设置代码自动补全. 1.进入settings --> Editor -- ...
android studio中使用github （上集）
android studio 使用github(下集) 1.配置github账号 1.1 进入File->Settings->Version Control->GitHub中,选择下 ...
uniapp开发app中配置高德地图定位流程
在使用uniapp开发app过程中,如何使用高德地图进行定位高德地图开放平台账号申请进入高德地图开放平台,注册并登陆开发者账号,完成之后点击进入控制台主页在应用管理中点击创建新应用输入并选择你 ...

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

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

带高德地图功能的Uniapp的android离线打包

1. Uniapp中使用高德地图的方式

2. 高德地图中申请key

3. uniapp中的设置

4. 自己实现 uni.chooseLocation

5. HBuilder-Integrate-AS 中的设置

5.1. AndroidManifest.xml的修改

5.2. dcloud_properties.xml的确认

5.3. lib中aar的复制

6.在 HBuilder-Integrate-AS3.3.5 中 build 生成 apk 即可。

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

最新文章

热门文章