我是科尔多瓦的初学者。 我有一个问题,以显示谷歌地图 我可以使用javascript在网站上显示谷歌地图。 我也可以使用java和xcode显示谷歌地图。
但不确定如何显示使用cordova。因为它是javascript + html。
所以我可以像下面的代码那样编写代码。
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
当然,它在Web浏览器上运行良好。我的问题是我应该使用什么样的钥匙?
我第一次使用javascript键。但它不适用于ios和android。我想在android上运行我应该使用andorid键。但如果是,我怎么能得到sha足迹密钥。在ios上也是如此。没有这个我无法获得Android谷歌地图API密钥。我试图找到解决方案但很多视频和文档,如果我使用javascript api密钥,它运行良好。但事实并非如此。我确定。如果是,我们如何获得密钥?第二个是将android和ios密钥插入javascript代码吗?
请帮帮我。感谢。
答案 0 :(得分:0)
我的问题是我应该使用什么样的钥匙?
您应该为应用所使用的任何设备使用正确的API密钥。
如果您前往Google Developer Console,请创建一个帐户,如果您还没有去过&gt;凭证&gt;创建凭据并选择API密钥。 创建你需要的任何东西,Android,iOS等。
加载脚本
您确实应该检查用户的互联网连接,以便在应用heres a tutorial for that中加载外部脚本。
基本上使用cordova-plugin-network-information检查用户连接状态,如果已连接,请加载地图脚本。
(function (global) {
"use strict";
function onDeviceReady () {
document.addEventListener("online", onOnline, false);
document.addEventListener("resume", onResume, false);
loadMapsApi();
}
function onOnline () {
loadMapsApi();
}
function onResume () {
loadMapsApi();
}
function loadMapsApi () {
var API_KEY;
if ( device.platform === 'Android') {
API_KEY = 'youAndroidAPIkey';
} else if ( device.platform === 'iOS') {
API_KEY = 'youriOSAPIkey';
}
if(navigator.connection.type === Connection.NONE || google.maps) {
return;
}
$.getScript('https://maps.googleapis.com/maps/api/js?key='+API_KEY+'&sensor=true&callback=onMapsApiLoaded');
}
global.onMapsApiLoaded = function () {
// Maps API loaded and ready to be used.
var map = new google.maps.Map(document.getElementById("map"), {});
};
document.addEventListener("deviceready", onDeviceReady, false);
})(window);
编辑-------------
我最初使用cordova-google-maps和恕我直言,因为我在商业应用程序中使用它太臃肿和错误。