Cordova 地理定位插件在 android 设备上不起作用答案

【问题标题】：Cordova geolocation plugin not working on android deviceCordova 地理定位插件在 android 设备上不起作用
【发布时间】：2016-11-06 00:19:15
【问题描述】：

我正在使用科尔多瓦地理定位插件。当我在浏览器上运行我的 index.html 时，我可以在地图上看到我的位置。但是当我在 android 设备上运行我的项目时，我什么也得不到。我只看到白页。我正在使用 Android 版本的 Kitkat。我从https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html这个链接得到指示。我尝试了其他问题的某种方式。但它不起作用。我该如何解决这个问题？

<!DOCTYPE html>
<html>
<head>
    <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">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-id_ZLCzQktYMWI2XrrMulXYGOzCUYhk"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;">
    </div>
    <script>
        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(15);
            map.setCenter(marker.getPosition());
        }
        // 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, { enableHighAccuracy: true });
        }       
        getMapLocation();
    </script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>      
</body>
</html>

这是我的 androidmanifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="com.example.geo" 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" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<application android:hardwareAccelerated="true" android:icon="@mipmap/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.DeviceDefault.NoActionBar" 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="16" android:targetSdkVersion="24" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-feature android:name="android.hardware.location.gps" />
</manifest>

【问题讨论】：

编码前请阅读文档：cordova.apache.org/docs/en/dev/cordova/events/…

标签： cordova

【解决方案1】：

在googlemap api js之前添加cordova js

<script src="cordova.js"></script>

然后将您的函数 getMapLocation(); 调用为 deviceReady 或 documentReady 之类的函数

//deviceReady
document.addEventListener("deviceready", getMapLocation, false);


//documentReady
$(document).ready(function(){
    getMapLocation();
});

这会对你有所帮助。

【讨论】：

您的解决方案不起作用我已经调用了 getMapLocation 函数，我也尝试在 google maps api 再次不起作用之前添加cordova js。
根据您的代码，您没有在文档准备好后调用函数，这就是为什么函数没有为地图创建 div。因此，请尝试将函数调用到准备好的文档中，并确保您的设备中的 GPS 已打开。