赞
踩
**uniapp 使用HBuider X打包后,高德地图打不开**
**一、问题:**
1、在HBuider x及微信开发者工具中运行正常,如下图所示:
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/821446455976167.png "#left")
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/975666455976174.png "#left")
2、通过HBuider按打包流程打包,并安装在Android手机上后运行,打不开地图,如下图所示:
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/947107455976129.jpg "#left")
**二、相关配置及关键代码段**
1、高德地图KEY已申请,如下:
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/127958255976131.png "#left")
2、manifest.json配置如下 :
```javascript
{
"name" : "**************",
"appid" : "__UNI__976A097",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {
"OAuth" : {},
"Payment" : {},
"Share" : {},
"Maps" : {},
"Geolocation" : {}
},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_CHECKIN_PROPERTIES\"/>",
"<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_LOCATION_EXTRA_COMMANDS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_SURFACE_FLINGER\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_MULTICAST_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.INTERNET\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\"/>"
],
"abiFilters" : [ "armeabi-v7a" ]
},
/* ios打包配置 */
"ios" : {
"idfa" : false,
"dSYMs" : false
},
/* SDK配置 */
"sdkConfigs" : {
"ad" : {},
"maps" : {
"amap" : {
"appkey_ios" : "1",
"appkey_android" : "**************c096f"
// 高德平台Android平台key
}
},
"oauth" : {
"weixin" : {
"appid" : "wx23964cf1092f6ba3",
// 微信开放平台的ID
"UniversalLinks" : ""
}
},
"payment" : {
"weixin" : {
"__platform__" : [ "android" ],
"appid" : "**************2f6ba3",
"UniversalLinks" : ""
}
},
"share" : {
"weixin" : {
"appid" : "**************2f6ba3",
"UniversalLinks" : ""
}
},
"geolocation" : {
"amap" : {
"__platform__" : [ "android" ],
"appkey_ios" : "1",
"appkey_android" : "**************c096f"
},
"system" : {
"__platform__" : [ "android" ]
}
}
},
"icons" : {
"android" : {
"hdpi" : "unpackage/res/icons/72x72.png",
"xhdpi" : "unpackage/res/icons/96x96.png",
"xxhdpi" : "unpackage/res/icons/144x144.png",
"xxxhdpi" : "unpackage/res/icons/192x192.png"
},
"ios" : {
"appstore" : "unpackage/res/icons/1024x1024.png",
"ipad" : {
"app" : "unpackage/res/icons/76x76.png",
"app@2x" : "unpackage/res/icons/152x152.png",
"notification" : "unpackage/res/icons/20x20.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"proapp@2x" : "unpackage/res/icons/167x167.png",
"settings" : "unpackage/res/icons/29x29.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"spotlight" : "unpackage/res/icons/40x40.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png"
},
"iphone" : {
"app@2x" : "unpackage/res/icons/120x120.png",
"app@3x" : "unpackage/res/icons/180x180.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"notification@3x" : "unpackage/res/icons/60x60.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"settings@3x" : "unpackage/res/icons/87x87.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png",
"spotlight@3x" : "unpackage/res/icons/120x120.png"
}
}
}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx92eb8e45718ca124",
"setting" : {
"urlCheck" : false,
"postcss" : true,
"minified" : true
},
"usingComponents" : true,
"permission" : {
"scope.userLocation" : {
"desc" : "您的位置将用于小程序展示"
}
},
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ],
"plugins" : {},
"unipush" : {
"enable" : false
},
"secureNetwork" : {
"enable" : false
}
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "2",
"h5" : {
"sdkConfigs" : {
"maps" : {
"amap" : {
"key" : "**************1d710",
"securityJsCode" : "**************a9fd",
"serviceHost" : ""
}
}
}
}
}
```
3、页面代码段如下:
```javascript
<template>
<view class="bady"">
<view class="map">
<map id='map' show-scale="true" :enable-3D='true' :controls="true" :polyline="polyline" :markers="markers"
bindregiοnchange="regionchange" :show-location='true'>
<cover-image class="img-map2" src="../../static/dingwei.png" @click="clickcontrol">
</cover-image>
</map>
</view>
</view>
</template>
<script>
import back from "@/components/back/back.vue"
import api from "../../api/driverapi.js"
import cinput from "../../new_file.js"
var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
var qqmapsdk;
import psaddress from "../../components/psaddress/psaddress.vue"
import amap from '../../utils/amap-wx.130.js'
import variable from '../../api/commonVariable.js'
export default {
data() {
return {
//附近骑手数量
fjqss: "",
bady: true,
ctime: "",
time: "计算中...",
itemh: 4,
items: 59,
orderxq: "",
markers: [],
polyline: [],
weizhi: {
map: {
q: {
lat: '',
lng: ''
},
z: {
latitude: "",
longitude: ""
}
}
},
string: 0,
qjshijian: ""
};
},
components: {
"psaddress": psaddress,
"back": back
},
onShareAppMessage(res) {
console.log(this.orderxq.id)
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: 'hello~我正在使用【一哈易送】点击查看订单进度',
path: '/pages/share/share?id=' + this.orderxq.id,
imageUrl: "https://www.xxrs-cntech.site/static/iiimg/分享.png"
}
},
methods: {
// 返回上页
houtui(){
console.log("返回上页")
uni.reLaunch({
url: "../index/indexorder"
})
},
//拨打电话
bddh() {
uni.makePhoneCall({
phoneNumber: this.orderxq.driver_mobile //仅为示例
});
},
//时间戳装日期
format(shijianchuo, x) {
function add0(m) {
return m < 10 ? '0' + m : m
}
//shijianchuo是整数,否则要parseInt转换
var time = new Date(shijianchuo);
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
if (x) {
return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
} else {
return add0(h) + ':' + add0(mm);
}
},
//时间戳钻日期
getLocalTime(nS) {
// return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
function add0(m) {
return m < 10 ? '0' + m : m
}
var time = new Date(nS*1000);
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
console.log( y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s))
return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) ;
},
//通知好友
tzhy() {
console.log("通知好友")
console.log(this.orderxq.id)
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 2,
imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
//修改订单
qxdd(x) {
console.log("修改订单")
if (x == false) {
uni.showToast({
title: "派送中无法修改",
icon: "error"
})
} else {
uni.navigateTo({
url: "amend?id=" + this.orderxq.id
})
}
},
//取消订单
cancel(x) {
if (x == false) {
uni.showToast({
title: "派送中无法取消",
icon: "error"
})
} else {
uni.navigateTo({
url: "./cancel?id=" + this.orderxq.id
})
}
},
clickcontrol() {
let poll = this.weizhi.map.z.latitude
let ponn = this.weizhi.map.z.longitude
let pol = this.weizhi.map.q.lat
let pon = this.weizhi.map.q.lng
let mbp = uni.createMapContext("map", this)
switch (uni.getSystemInfoSync().platform) {
case 'android':
console.log('运行Android上')
mbp.includePoints({
padding: ["30", "30", "30", "30"],
points: [{
latitude: poll,
longitude: ponn
}, {
latitude: pol,
longitude: pon
}]
})
break;
case 'ios':
console.log('运行iOS上')
mbp.includePoints({
padding: ["130", "30", "30", "30"],
points: [{
latitude: poll,
longitude: ponn
}, {
latitude: pol,
longitude: pon
}]
})
break;
default:
console.log('运行在开发者工具上')
mbp.includePoints({
padding: ["30", "30", "30", "30"],
points: [{
latitude: poll,
longitude: ponn
}, {
latitude: pol,
longitude: pon
}]
})
break;
}
},
lxgh(w) {
let _this = this
let mbp = uni.createMapContext("map", this)
qqmapsdk = new QQMapWX({
key: 'ZJ6BZ-3HNCK-G3DJV-ANXIR-ZKGBZ-TIBEQ',
// key只能手动修改,不可以使用全局变量
});
this.latitude = this.weizhi.map.q.lat
this.longitude = this.weizhi.map.q.lng
let pol = this.weizhi.map.z.latitude
let pon = this.weizhi.map.z.longitude
let poll = this.weizhi.map.q.lat
let ponn = this.weizhi.map.q.lng
console.log("进来了要运行")
console.log(pol, pon, poll, ponn)
switch (uni.getSystemInfoSync().platform) {
case 'android':
console.log('运行Android上')
mbp.includePoints({
padding: ["30", "30", "30", "30"],
points: [{
latitude: poll,
longitude: ponn
}, {
latitude: pol,
longitude: pon
}]
})
break;
case 'ios':
console.log('运行iOS上')
mbp.includePoints({
padding: ["130", "30", "30", "30"],
points: [{
latitude: poll,
longitude: ponn
}, {
latitude: pol,
longitude: pon
}]
})
break;
default:
console.log('运行在开发者工具上')
mbp.includePoints({
padding: ["30", "30", "30", "30"],
points: [{
latitude: poll,
longitude: ponn
}, {
latitude: pol,
longitude: pon
}]
})
break;
}
qqmapsdk.direction({
mode: 'driving', //可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
//from参数不填默认当前地址
from: _this.weizhi.map.q.lat + ',' + _this.weizhi.map.q.lng,
to: _this.weizhi.map.z.latitude + ',' + _this.weizhi.map.z.longitude,
success: function(res) {
console.log("这是返回回来的路线和时间", res.result.routes[0].duration);
// 获取驾车所需时间
let times = res.result.routes[0].duration * 60
// 获取当前时间戳(以s为单位)
var timestamp = Date.parse(new Date());
timestamp = _this.ctime + times;
//当前时间戳为:1403149534
console.log("时间戳:" + timestamp);
_this.time = _this.format(timestamp * 1000)
console.log(_this.format(timestamp * 1000), "--------")
//已经获取到预计送到时间
_this.orderxq.yjtime = _this.format(timestamp * 1000, true)
_this.bady = true
var ret = res;
_this.shijian = ret.result.routes[0].duration
_this.xkm = (ret.result.routes[0].distance / 1000).toFixed(1)
let marks = [{
iconPath: "../../static/ji.png",
id: 1,
longitude: ponn,
latitude: poll,
title: "我在这里",
width: 25,
height: 35,
callout: {
content: `预计${5}分钟内接单${'\n'}附近有${_this.fjqss}位骑士`,
color: '#000',
fontSize: 14,
borderWidth: 1,
borderRadius: 10,
bgColor: '#fff',
padding: 8,
display: 'ALWAYS',
textAlign: 'center'
}
},
{
iconPath: "../../static/shou.png",
id: 2,
longitude: pon,
latitude: pol,
width: 25,
height: 35,
callout: {
content: `预计${_this.time.slice(_this.time.indexOf('午')+1,_this.time.length)}送达`,
color: '#000',
fontSize: 14,
borderWidth: 1,
borderRadius: 10,
bgColor: '#fff',
padding: 8,
display: 'ALWAYS',
textAlign: 'center'
}
}
]
if (w == 101 || w == 105) {
_this.markers = marks
}
if (w == 102 || w == 103) {
let dadsj = _this.orderxq.receive_time + times
_this.qjshijian = _this.getLocalTime(dadsj)
marks[0].iconPath = "../../static/ji.png"
marks[0].callout.content = `预计${_this.qjshijian.split(' ')[1]}到达取件地`
marks[1].iconPath = "../../static/shou.png"
marks[1].callout.content = `骑手所在位置 `
_this.markers = marks
}
if (w == 104) {
let dadsj = _this.orderxq.start_time + times
_this.qjshijian = _this.getLocalTime(dadsj)
marks[0].iconPath = "../../static/ji.png"
marks[0].callout.content = `骑手已取件`
marks[1].iconPath = "../../static/shou.png"
marks[1].callout.content = `预计${_this.qjshijian.split(' ')[1]}送达 `
_this.markers = marks
}
_this.rmb = parseInt(ret.result.routes[0].distance / 1000 + 1)
var coors = ret.result.routes[0].polyline,
pl = [];
//坐标解压(返回的点串坐标,通过前向差分进行压缩)
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({
latitude: coors[i],
longitude: coors[i + 1]
})
}
//在地图上绘制路线设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
_this.polyline = [{
points: pl,
color: "#007aff", //线条的颜色
width: 5, //宽度
arrowLine: true, //是否带箭头
borderWidth: 2,
borderColor: "#cccccc",
level: "abovebuildings"
}]
}
});
}
},
onLoad(e) {
console.log(e.id)
let _this = this
this.$http({
url: api.order_detail,
data: {
order_id: e.id
}
}).then(res => {
console.log(res)
this.orderxq = res.data
this.ctime = res.data.created_at
this.string = res.data.status
if (_this.orderxq.status == 101) {
_this.weizhi.map.q.lat = _this.orderxq.send_address_latitude
_this.weizhi.map.q.lng = _this.orderxq.send_address_longitude
_this.weizhi.map.z.latitude = _this.orderxq.receive_address_latitude
_this.weizhi.map.z.longitude = _this.orderxq.receive_address_longitude
_this.lxgh(res.data.status)
} else if (_this.orderxq.status == 102 || 103) {
_this.weizhi.map.q.lat = _this.orderxq.driver_latitude
_this.weizhi.map.q.lng = _this.orderxq.driver_longitude
_this.weizhi.map.z.latitude = _this.orderxq.send_address_latitude
_this.weizhi.map.z.longitude = _this.orderxq.send_address_longitude
_this.lxgh(res.data.status)
}
_this.$http({
url: api.fjqs,
data: {
lat: res.data.send_address_longitude,
long: res.data.send_address_latitude
}
}).then(res => {
console.log(res, "附近骑手")
_this.fjqss = res.data
})
})
}
}
</script>
<style lang="scss" scoped>
</style>
```
三、请教一下,这个问题是什么原因?先谢谢各位大老的指点。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。