Ionic Framework / Cordova上的Google Maps不支持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）但在移动设备（Android）上根本不起作用。

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

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

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的自述文件 -whitelist 了解更多信息。

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 Maps不支持android版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！