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

Question

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

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

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

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

Answer 1

错误指出 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' *">

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

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

Google Maps on Ionic Framework/Cordova not working on android build

phonegap-plugins

cordova

ionic-framework

cordova-plugins