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

带高德地图功能的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=this
			if(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=this
		var mapStyle=this.mapStyle
		uni.getSystemInfo({
		　　success: function(res) { // res - 各种参数
				var winWidth=res.screenWidth
				var winHeight=res.windowHeight
				dom.getComponentRect(that.$refs.mapTop, option => {
					var topHeight=option.size.height// 地图距顶部
					dom.getComponentRect(that.$refs.mapBottom, option => {
						var bottomHeight=option.size.height
						var mapheight=(winHeight-topHeight-bottomHeight)
						mapStyle.height=mapheight+'px'
						mapStyle.width=winWidth+'px'
						mapStyle['margin-top']=topHeight+'px'
						that.mapStyle=mapStyle
						that.mapWAH.height=mapheight
						that.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" />
        <application
        android: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 即可。