Ionic Framework / Cordova上的Google Maps不支持android版本

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

我的代码在浏览器(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

错误表明谷歌未定义.我最好的猜测是来自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' *">

请注意,上述设置不是您希望在生产环境中拥有的设置.请查看有关cordova-plugin-whiteelist的README以了解更多信息.