Question

我正在为Android开发一个cordova应用程序，我必须嵌入谷歌地图。我正在使用谷歌地图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>

可能是什么问题？

感谢。

Answer 1

一旦运行此命令，只需尝试为地理位置添加cordova插件 “cordova插件添加cordova-plugin-geolocation”，然后再试一次。你会得到结果。

谷歌地图js api在浏览器上工作但在cordova app上没有

1 个答案: