由于公司的业务主要是非洲的，所以做地图功能的时候就需要用到一款国际地图，高德直接不支持，百度的在uni-app上配置了没效果，苹果地图也找过，但是在indentifiers下面没有找到map IDS选项，故放弃，那就是谷歌地图了；
uni-app的官方说法是:
这里就选择第一种方案。
调用谷歌地图，首先需要*，*软件自己找吧，然后需要去谷歌地图平台注册账号，申请秘钥:
平台地址：https://developers.google.cn/maps/gmp-get-started
平台注册需要填写国家,姓名，地址，还有一张国际银行卡号等信息,这里需要注意的地方:
国家里面没有中国，那就选香港好了，不要选其他国家，如果选了其他国家还要填写当地的邮箱，非常麻烦。
注册好后获取秘钥。
然后开始写代码:
按钮界面效果图:
相应代码:
<template>
<view class="cont">
<button @click="start">Start GoogleMap</button>
</view>
</template>
<script>
export default {
data() {
return {
prePath : this.settings.prePath,
obj :{},
}
},
methods: {
lodaData(){
uni.showLoading({
title: "Loading...",
mask: true,
});
uni.request({
url: this.prePath+'app/gpsinfo/station', //仅为示例，并非真实接口地址。
method : 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
data: {
StationID: uni.getStorageSync('StationID'),
},
success: (res) => {
if(res.data.error_code=='0'){
this.obj=res.data.data
}else{
uni.showToast({
icon: 'none',
position: 'bottom',
title: res.data.message
});
}
},
complete:()=>{
uni.hideLoading();
}
});
},
start(){
uni.navigateTo({
url: '../map?lat='+this.obj.Latitude+'&log='+this.obj.Longitude
})
}
},
mounted(){
this.lodaData()
},
}
</script>
<style>
.cont{
width: 100vw;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
我是用一个页面单独加载webview:
<template >
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
var wv;
export default {
data() {
return {
url:'/hybrid/html/map.html?'
}
},
methods: {
},
mounted(){
},
onLoad(option) {
this.url+="log="+option.log+"&lat="+option.lat
},
onReady() {
// #ifdef APP-PLUS
var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
// #endif
}
}
</script>
<style scoped>
</style>
web-view页面效果图:
web-view页面代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Google Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=你的秘钥&callback=initMap&libraries=&v=weekly"
defer
></script>
<style type="text/css">
#map {
height:calc(100% - 50px);
}
html,body {
height:calc(100% - 50px);
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="btn-list" style="display: flex;align-items: center;">
<image @click="" data-action="navigateBack" style="width: 20px;padding: 5px 0 5px 10px;position: absolute;left: 0;" src="./img/back.png"></image>
<div style="width: 100%;text-align: center;height: 50px;line-height: 50px;">
<h4 style="margin: 0 0;">Map</h4>
</div>
</div>
<div id="map"></div>
</body>
</html>
<script>
function getQuery(name) {
// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if(r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}
let map;
function initMap() {
const uluru = { lat: Number(getQuery('lat')), lng: Number(getQuery('log')) };
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: Number(getQuery('lat')) , lng: Number(getQuery('log')) },
zoom: 16,
center: uluru,
});
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write(
'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
);
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
document.write(
'<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write(
'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
);
} else if (/quickapp/i.test(userAgent)) {
// quickapp
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
}
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
document.querySelector('.btn-list').addEventListener('click', function(evt) {
var target = evt.target;
uni.navigateBack({
delta: 1
});
});
});
</script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
完成。