最近在做uni-app的項目，由于是海外市場，是以在APP中需要使用到谷歌地圖，本文主要是記錄一下如何在uni-app中正确引入并使用我們的谷歌地圖。（刨除微信小程式，微信小程式中還是使用uni.openLocation）
關于此問題，UNI官方給的說法是：
這裡我選擇第一種方法。
1.在引用我們的谷歌地圖之前，是需要先注冊谷歌地圖賬号并申請密鑰，由于需要翻牆，這裡隻附錄一下連結位址，具體操作注冊進入谷歌地圖開發者平台之後按照文檔操作即可：
Google Map DOC
選擇MAP JavaScript API
開始撸代碼：
①.使用一個獨立頁面承載我們的webview。
注意：這裡的link為我們的html檔案位址，可以是網絡位址也可以是本地html檔案。如果是本地HTML檔案的話，需要注意的是檔案必須放在與pages檔案夾同級别的hybrid檔案的html檔案夾下，這一點官方文檔上有所說明
②.google-map.html（用來承載我們谷歌地圖代碼的頁面）
這裡直接就不做闡述，直接上代碼了。需要注意的地方就是script标簽中引入谷歌地圖檔案的那個key一定要寫對，同時，我們在測試的時候必須是牆外環境，國内是無法通路谷歌地圖的。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></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>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>
<style type="text/css">
#map {
height: 100%;
width: 100%;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
action: 'message'
}
});
uni.getEnv(function(res) {
console.log('目前環境：' + JSON.stringify(res));
});
});
</script>
<script>
var map = null
function initMap() {
var centerPoint = {
lat: Number(GetUrlParam('lat')),
lng: Number(GetUrlParam('log'))
};
var covers = GetUrlParam('covers')?JSON.parse(decodeURIComponent(GetUrlParam('covers'))):null
if (covers) {
//https://now.guua.com/attachs/default/location_shop.png location_staff.png
covers[0].iconPath = covers[0] ? 'https://now.guua.com/attachs/default/location_shop.png' : ''
}
document.title = decodeURIComponent(GetUrlParam('title'))
//建立map
map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: centerPoint,
});
if (covers && covers[0]) {
//标記點
const shopMarker = new google.maps.Marker({
position: {
lat: Number(covers[0].lat),
lng: Number(covers[0].lng),
},
map,
icon:{
url: covers[0].iconPath || '',
scaledSize: new google.maps.Size(50, 50),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 0)
}
});
}
}
// 處理URL參數
function GetUrlParam(paraName) {
var url = window.location.href;
var arrObj = url.split("?");
if (arrObj.length > 1) {
var arrPara = arrObj[1].split("&");
var arr;
for (var i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split("=");
if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return "";
} else {
return "";
}
}
</script>