部署到设备时，Google 映射 Javascript API 无法正常工作答案

【问题标题】：Google maps Javascript API not working when deployed to device部署到设备时，Google 映射 Javascript API 无法正常工作
【发布时间】：2016-08-15 20:34:10
【问题描述】：

我有这段代码，它在浏览器上运行良好，但是当我将它部署到我的 android 设备时，它不起作用。该代码旨在获取我当前的位置，然后为我提供前往指定位置的路线。有什么帮助吗？提前致谢。

<!doctype html>
<html lang="en">
   <head>
        <title>Rotrack</title>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
        <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
        <script src="js/jquery-1.8.2.min.js"></script>
        <script>
            $(document).bind('mobileinit',function(){
                $.mobile.changePage.defaults.changeHash = false;
                $.mobile.hashListeningEnabled = false;
                $.mobile.pushStateEnabled = false;
            });
        </script> 
        <script src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">

            var map,
                currentPosition,
                directionsDisplay, 
                directionsService;

            function initialize(lat, lon)
            {
                directionsDisplay = new google.maps.DirectionsRenderer(); 
                directionsService = new google.maps.DirectionsService();

                currentPosition = new google.maps.LatLng(lat, lon);

                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 20,
                   center: currentPosition,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });

                directionsDisplay.setMap(map);

                 var currentPositionMarker = new google.maps.Marker({
                    position: currentPosition,
                    map: map,
                    title: "Current position"
                });

                var infowindow = new google.maps.InfoWindow();
                google.maps.event.addListener(currentPositionMarker, 'click', function() {
                    infowindow.setContent("Current position: latitude: " + lat +" longitude: " + lon);
                    infowindow.open(map, currentPositionMarker);
                });
            }

            function locError(error) {
                // initialize map with a static predefined latitude, longitude
               initialize(59.3426606750, 18.0736160278);
            }

            function locSuccess(position) {
                initialize(position.coords.latitude, position.coords.longitude);
            }

            function calculateRoute() {
                var targetDestination = $("#target-dest").val();
                if (currentPosition && currentPosition != '' && targetDestination && targetDestination != '') {
                    var request = {
                        origin:currentPosition, 
                        destination:targetDestination,
                        travelMode: google.maps.DirectionsTravelMode["DRIVING"]
                    };

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setPanel(document.getElementById("directions"));
                            directionsDisplay.setDirections(response); 

                            /*
                                var myRoute = response.routes[0].legs[0];
                                for (var i = 0; i < myRoute.steps.length; i++) {
                                    alert(myRoute.steps[i].instructions);
                                }
                            */
                            $("#results").show();
                        }
                        else {
                            $("#results").hide();
                        }
                    });
                }
                else {
                    $("#results").hide();
                }
            }

            $(document).live("pagebeforeshow", "#map_page", function() {
                navigator.geolocation.getCurrentPosition(locSuccess, locError);
            });

            $(document).on('click', '#directions-button', function(e){
                e.preventDefault();
                calculateRoute();
            });

        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Rotrack</a></h1>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
                <div data-role="fieldcontain">
                    <label for="target-dest">Target Destination:</label>
                    <input type="text" name="target-dest" id="target-dest" value=""  />
                </div>
                <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a>
                <div id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>      
    </body>
</html>

【问题讨论】：

“它不起作用”太模糊了。
我想我清楚地说明了代码的用途（它在浏览器上实际执行的操作），它没有在设备上执行任何操作，我也没有收到错误.

标签： javascript android cordova google-maps google-maps-api-3

【解决方案1】：

需要在您的设备中启用 GPS 才能正常工作。

【讨论】：

【解决方案2】：

为谷歌地图使用cordova插件，如https://github.com/mapsplugin/cordova-plugin-googlemaps。

它将确保只有在启用所有设备功能（启用 GPS 访问？）并且设备准备好（检查 cordova onDeviceReady 事件）后，才会调用 Google Map API 函数。

【讨论】：

我现在也用我的密钥添加了插件，它仍然无法工作。该插件是否可以与我的代码（我提供的示例）一起使用，因为cordova-plugin-googlemaps git 上没有示例。
您是否安装了cordova-plugin-geolocation？此外，或 maps.google.com" />。必须正确设置。还应安装和配置cordova-plugin-whitelist。运行应用程序时控制台中是否显示任何错误？
我已经安装了所有东西，出于某种原因，当我删除 <script src="cordova.js"></script> 时它工作正常。不，我在控制台上没有收到任何错误。