我正在开发一个适用于 Android 的 Cordova 应用程序，我必须在其中嵌入谷歌地图。我正在使用 google map js api v3 来实现这一点。现在它可以在浏览器上运行，但是当我尝试在 Android 手机(android v5.1.1)中运行该应用程序时，没有任何显示。
这是所有代码
index.js
var locator = {
//locator object; gets the current location
//functions
init: function() {
// fetching position
navigator.geolocation.getCurrentPosition(this.locatorSuccess.bind(this), this.locatorError.bind(this), {enableHighAccuracy: true});
},
locatorSuccess: function(position) {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.speed = position.coords.speed;
this.timestamp = position.timestamp;
this.accuracy = position.coords.accuracy;
// displaying on map
this.locatorMap();
},
locatorError: function(error) {
console.log(error.message);
},
locatorMap: function() {
this.latLong = new google.maps.LatLng(this.latitude, this.longitude);
//google map
this.map = new google.maps.Map(document.getElementById('rushhour-google-map-area'), {
center: this.latLong,
zoom: 16,
});
//google map marker
this.marker = new google.maps.Marker({
position: this.latLong,
map: this.map,
title: 'my location'
});
},
};
locator.init();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<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">
<link rel="stylesheet" type="text/css" href="css/material.min.css">
<link rel="stylesheet" type="text/css" href="css/material.blue_grey-red.min.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<title>Rushhour</title>
</head>
<body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Rushhour</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link1</a>
<a class="mdl-navigation__link" href="">Link2</a>
<a class="mdl-navigation__link" href="">Link3</a>
<a class="mdl-navigation__link" href="">Link4</a>
</nav>
</div>
<div class="mdl-layout__content">
<div id="rushhour-google-map-area" class="map-area"></div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/material.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="today.rushhour.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>rushhour</name>
<description>
test
</description>
<author email="test@test.com" href="http://test.com">
test Team
</author>
<content src="rushhour.html" />
<plugin name="cordova-plugin-whitelist" version="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>
<preference name="StatusBarBackgroundColor" value="#506670" />
<allow-navigation href="*" />
</widget>
AndroidManifest.xml
<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="today.rushhour.app" xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
<intent-filter android:label="@string/launcher_name">
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
</manifest>
可能是什么问题？
谢谢。
最佳答案
只需尝试添加 cordova 插件进行地理定位，一旦运行此命令 “cordova 插件添加 cordova-plugin-geolocation”，然后重试。你会得到结果。
关于javascript - 谷歌地图js api在浏览器上工作但在cordova应用程序上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32593002/