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=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 即可。