Ionic Framework/Cordova 上的 Google 地图不适用于 android 构建 [英] Google Maps on Ionic Framework/Cordova not working on android build

问题描述

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

I have been writing code for an app to track user location and display it using Google Maps.

我的代码在浏览器(Safari、Firefox、Chrome)中完美运行，但在移动设备(安卓)上根本无法运行.

My code works perfectly in browsers (Safari,Firefox,Chrome) but doesn't work at all on mobile (android).

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

The google maps api doesn't work and the navigation is unreliable. I'm a ionic newbie and wrote a fairly simple app to test it out. It has got ionic side menu template with some simple AngularJS controller.

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 上的所有代码.对此的任何帮助将不胜感激.

Check all code on GitHub. Any help on this would be appreciated.

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

The error displaying on my developer console:

ReferenceError: google is not defined

推荐答案

错误指出 google 未定义.我最有根据的猜测是 index.html 中的脚本没有正确加载:

Error states that google is undefined. My best educated guess would be that the script from the index.html is not loaded correctly:

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

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

I think this is because of the new Cordova 5.0 release being used. You need to install the cordova-plugin-whitelist as following:

cordova plugin add cordova-plugin-whitelist

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

Also add the following to config.xml:

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

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

Finally add the following to your 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-whitelistREADME/code> 了解更多.

Be aware that above settings are not settings you want to have in a production environment. Please take a look at the README of the cordova-plugin-whitelist to learn more.

这篇关于Ionic Framework/Cordova 上的 Google 地图不适用于 android 构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！