地图未在 Cordova Android 中显示
Posted
技术标签:
【中文标题】地图未在 Cordova Android 中显示【英文标题】：Map not showing in Cordova Android 【发布时间】：2018-05-16 15:08:37 【问题描述】：我按照这些说明使用 Cordova 构建了一个 android 应用 https://cordova.apache.org/docs/en/latest/guide/cli/index.html
除了在我运行 emulate browser 或 emulate android 时显示地图外，一切正常，但在我将 apk 安装到我的 J5 Samsung 手机时却没有。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src * data: 'unsafe-inline'">
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- Good default declaration:
* gap: is required only on ios (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
* Enable eval(): add 'unsafe-eval' to default-src
* Create your own at http://cspisawesome.com
-->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<style type="text/css">
html height: 100%
body height: 100%; margin: 0; padding: 0
#map height: 100%
</style>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<div id="geolocation"></div>
<button type="button" onclick="addMarker()">Add Marker</button>
<div id="map">MAP HERE</div>
<script src="/__/firebase/4.13.0/firebase-app.js"></script>
<script src="/__/firebase/4.13.0/firebase-auth.js"></script>
<script src="/__/firebase/4.13.0/firebase-database.js"></script>
<script src="/__/firebase/4.13.0/firebase-messaging.js"></script>
<script src="/__/firebase/4.13.0/firebase-functions.js"></script>
<!-- Leave out Storage -->
<!-- <script src="/__/firebase/4.13.0/firebase-storage.js"></script> -->
<script src="/__/firebase/init.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8RwcNCgxRCRpiSgiRpr_InT2Vt-aDwPQ" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
<script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
<script>
// Initialize Firebase
var config =
.............
;
firebase.initializeApp(config);
</script>
还有js文件
var test=5;
var json = [
lat: 55.5,
lng: -4
,
lat:56,
lng: -4.5
];
var Latitude = undefined;
var Longitude = undefined;
// Get geo coordinates
function getMapLocation()
navigator.geolocation.getCurrentPosition
(onMapSuccess, onMapError, enableHighAccuracy: true );
// Success callback for get geo coordinates
var onMapSuccess = function (position)
Latitude = position.coords.latitude;
Longitude = position.coords.longitude;
getMap(Latitude, Longitude);
;
// Get map by using coordinates
function getMap(latitude, longitude)
var mapOptions =
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map
(document.getElementById("map"), mapOptions);
var latLong = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker(
position: latLong
);
//marker.setMap(map);
map.setZoom(9);
map.setCenter(marker.getPosition());
showMarkers();
// Success callback for watching your changing position
var onMapWatchSuccess = function (position)
var updatedLatitude = position.coords.latitude;
var updatedLongitude = position.coords.longitude;
if (updatedLatitude != Latitude && updatedLongitude != Longitude)
Latitude = updatedLatitude;
Longitude = updatedLongitude;
getMap(updatedLatitude, updatedLongitude);
;
// Error callback
function onMapError(error)
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
// Watch your changing position
function watchMapPosition()
return navigator.geolocation.watchPosition
(onMapWatchSuccess, onMapError, timeout: 30000 );
function showMarkers()
for(var i=0;i<json.length;i++)
data = json[i];
var latLong = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker(
position: latLong
);
marker.setMap(map);
function addMarker()
var newMarker = new Object();
newMarker["lat"] = Latitude;
newMarker["lng"] = Longitude;
writeCoords("abc",Latitude, Longitude);
json.push(newMarker);
showMarkers();
function readMarkers()
var activeRef = firebase.database().ref('location/');
activeRef.on('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
alert(childSnapshot.val().latitude);
);
);
watchMapPosition();
function writeCoords(userId, lat, lng)
firebase.database().ref('location/' + firebase.database().ref().child('location').push().key).set(
latitude: lat,
longitude: lng
);
var app =
// Application Constructor
initialize: function()
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
,
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function()
this.receivedEvent('deviceready');
,
// Update DOM on a Received Event
receivedEvent: function(id)
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
;
app.initialize();
还有 config.xml，因为这可能是问题所在
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloWorld</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="~6.1.2" />
</widget>
在模拟器上一切正常，我可以使用标记按钮上传到 Firebase。当它移动到手机本身时，我可以看到除了地图之外的所有内容。
【问题讨论】：
【参考方案1】：嗯，我做了两件事。安装 cordova 插件 add cordova-plugin-geolocation 并在安装后从手机上拔下 USB。不确定两者是否都需要，但现在可以使用。
【讨论】：
以上是关于地图未在 Cordova Android 中显示的主要内容，如果未能解决你的问题，请参考以下文章
为啥错误 CameraUpdateFactory 未在 MapsFragment android 中初始化？
IBM Worklight/Cordova 未在 Android 上 Worklight 的嵌入式 WebView 中加载