Android 4.2.2不会为我的应用程序加载谷歌地图

时间:2014-10-10 09:10:27

标签: android cordova

我正在开发一个Android应用程序(使用Phonegap构建),需要显示用户的当前位置并在Google Map上加载KMZ文件(使用多边形线)(使用google map api)。

我的应用程序在特定缩放级别加载地图(11),并根据用户的当前位置(减少数据消耗)居中。我注意到对于Android OS 4.2.2,地图根本没有加载,消息显示“访问被拒绝到你当前的位置”。

另一方面,为Android OS 4.1.2,4.3,4.4正确加载地图(没有收到任何消息)。

这是Android 4.2.2的安全问题/错误吗? 或者它是一个与我用来构建APK的Phonegap相关的错误? 我该如何解决这个问题?我需要在移动设备上做任何配置吗?

由于

2 个答案:

答案 0 :(得分:0)

它适用于Android 4.2.2或任何其他受支持的版本。您的代码设置可能存在错误。

我刚刚通过创建示例应用程序重新确认。

<强>步骤:

(1)在html标题部分中包含 Google API密钥和地图jS链接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="width=device-width, height=device-height" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_VALUE_&sensor=true"></script>
        <title>Hello World</title>
    </head>
    <body>
          <b>Road View</b>
            <div id="map-canvas" style="width: 100%; height: 200px"></div>  
            <b>Street View</b>          
          <div id="pano" style="width: 100%; height: 200px;"></div>
          <b>Live Traffic Update View</b>
          <div id="traffic" style="width: 100%; height: 200px;"></div>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>  
    </body>
</html>

(2)在 index.js 文件中声明以下函数来渲染地图

var app = {
         initialize: function() {
            this.bindEvents();
        }, 
        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        }, 
        onDeviceReady: function() {
            app.receivedEvent('deviceready');
            app.renderMap();
        }, 
        receivedEvent: function(id) {
        },
        renderMap: function() {
            // --- Road View 
            var fenway = new google.maps.LatLng(42.345573, -71.098326);
            var mapOptions = {
                center: fenway,  zoom: 11
            };
            var map = new google.maps.Map( document.getElementById('map-canvas'), mapOptions);

            // ---- Street View
            var panoramaOptions = {
                position: fenway,
                pov: {  heading: 34, pitch: 10    }
            };
            var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
            map.setStreetView(panorama); 

            // ---- Live Traffic View
            var myLatlng = new google.maps.LatLng(34.04924594193164, -118.24104309082031);
            var mapOptions = {
                zoom: 13,
                center: myLatlng
            }
            var map = new google.maps.Map(document.getElementById('traffic'), mapOptions);
            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(map);
        }
    };

    app.initialize();

(3)在 AndroidManifest.xml 文件中添加权限。

(4)将项目API级别设置为所需的版本,例如4.2.2 (5)在设备上运行App,它应该显示三种不同类型的地图视图(道路,街道和实时流量)

enter image description here

enter image description here

答案 1 :(得分:0)

这是我用来在地图上加载KML文件的JS文件代码,获取当前位置,显示标记:

'use strict';

angular.module('ehunter.controllers', []).
    controller('RegionListCtrl', ['$scope', '$http', '$window',
        function($scope, $http, $window) {
            $http.get('regions.json').success(function(data) {
                $scope.regions = data;
            });
            $scope.openBrowser = function(url){
            $window.open(url, "_blank", "location=yes");

        }
    }])
    .controller('RegionViewCtrl', ['$scope', '$routeParams',
        function($scope, $routeParams) {
          $scope.region = angular.fromJson($routeParams.r);
           var map;
            var src = "MY_SERVER"+ $scope.region.File;

            initialize();


            function initialize() {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                    zoom: 11,  
                    mapTypeId: google.maps.MapTypeId.TERRAIN 
                });
                loadKmlLayer(src, map);

            }

            function loadKmlLayer(src, map) {
                var kmlLayer = new google.maps.KmlLayer(src, {
                    suppressInfoWindows: true,
                    preserveViewport: true,   
                    map: map
                }); 

             }

            getLocation();

             function getLocation(){
                  if (navigator.geolocation) {
                     navigator.geolocation.getCurrentPosition(function displayPosition(position) {

                          var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),  
                              map: map
                          });
                         marker.setVisible(true);
                         marker.setMap(map); 
                         map.setCenter(marker.position);  

                        });   

    }}
    }])