Ionic Framework/Cordova 上的 Google 地图不适用于 Android 构建

我一直在为一个应用程序编写代码来跟踪用户位置并使用谷歌地图显示它。

我的代码在浏览器（Safari、Firefox、Chrome）中完美运行，但在移动设备（android）上根本不起作用。

谷歌地图 API 不起作用，导航也不可靠。我是一个离子新手，编写了一个相当简单的应用程序来测试它。它有离子侧菜单模板和一些简单的 AngularJS 控制器。

angular.module('starter.controllers', [])

    .controller('AppCtrl', function($scope, $ionicModal, $timeout) {

        // With the new view caching in Ionic, Controllers are only called
        // when they are recreated or on app start, instead of every page change.
        // To listen for when this page is active (for example, to refresh data),
        // listen for the $ionicView.enter event:
        //$scope.$on('$ionicView.enter', function(e) {
        //});

        // Form data for the login modal
        $scope.loginData = {};

        // Create the login modal that we will use later
        $ionicModal.fromTemplateUrl('templates/login.html', {
            scope: $scope
        }).then(function(modal) {
            $scope.modal = modal;
        });

        // Triggered in the login modal to close it
        $scope.closeLogin = function() {
            $scope.modal.hide();
        };

        // Open the login modal
        $scope.login = function() {
            $scope.modal.show();
        };

        // Perform the login action when the user submits the login form
        $scope.doLogin = function() {
            console.log('Doing login', $scope.loginData);

            // Simulate a login delay. Remove this and replace with your login
            // code if using a login system
            $timeout(function() {
                $scope.closeLogin();
            }, 1000);
        };
    })

    .controller('PlaylistsCtrl', function($scope) {
        $scope.playlists = [
            { title: 'Reggae', id: 1 },
            { title: 'Chill', id: 2 },
            { title: 'Dubstep', id: 3 },
            { title: 'Indie', id: 4 },
            { title: 'Rap', id: 5 },
            { title: 'Cowbell', id: 6 }
        ];
    })

    .controller('PlaylistCtrl', function($scope, $stateParams) {
    })

    .controller('MapController', function($scope, $ionicLoading) {
        console.log("MapController");
        $scope.initialise = function() {
            console.log("In Google.maps.event.addDomListener");
            var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
            var mapOptions = {
                center: myLatlng,
                zoom: 19,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            console.log(mapOptions);
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            navigator.geolocation.getCurrentPosition(function(pos) {
                console.log(pos);
                map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                var myLocation = new google.maps.Marker({
                    position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                    map: map,
                    title: "My Location"
                });
            });

            $scope.map = map;
        };
        google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());


    });

检查所有代码GitHub。对此的任何帮助将不胜感激。

我的开发者控制台上显示的错误：

ReferenceError: google is not defined

错误指出google未定义。我最有根据的猜测是来自index.html未正确加载：

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD4bzp0Ck8nTXgfs9ZYo8vXZ2tgWhqzWmY&sensor=true">

我认为这是因为使用了新的 Cordova 5.0 版本。您需要安装cordova-plugin-whitelist如下：

cordova plugin add cordova-plugin-whitelist

还将以下内容添加到config.xml:

<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

最后将以下内容添加到您的index.html:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' *; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">

请注意，上述设置不是您希望在生产环境中使用的设置。请看一下README of the cordova-plugin-whitelist了解更多。