GoogleマップJavascript APIがデバイスにデプロイされたときに機能しない

私はこのコードをブラウザで正常に実行しますが、Androidデバイスにデプロイすると動作しません。コードは私の現在の場所を取得し、指定された場所への道順を教えてくれます。どんな助け？前もって感謝します。GoogleマップJavascript APIがデバイスにデプロイされたときに機能しない

<!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>

出典

2016-04-22 ChasingShadows

「機能しません」があまりにも曖昧です。 – Andy

私は、コードが何を意味するのか（ブラウザ上で実際に何をするのか）を明示していると思いますが、デバイス上で何もしません。エラーもありません。 – ChasingShadows

-1

あなたの端末でGPSが有効になっていますか？

出典

2016-04-22 09:26:44

これはコメントであり、答えではありません。 – Andy

https://github.com/mapsplugin/cordova-plugin-googlemapsのようなグーグルマップにコードバープラグインを使用します。

Google Maps APIの機能は、すべてのデバイス機能が有効になっている（GPSアクセスが有効になっている）と、デバイスが準備ができたら（cordova onDeviceReadyイベントを確認した後）のみ呼び出されます。

出典

2016-04-22 09:59:48 geisi93

私はちょうど私のキーでプラグインを追加したばかりですが、それはまだ動作しません。 'cordova-plugin-googlemaps' gitの例がないので、プラグインは自分のコードで動作します（私が与えたサンプル）。 – ChasingShadows

cordova-plugin-geolocationがインストールされていますか？また、<アクセス元= "*" />または<アクセス元= "http://maps.google.com" />。正しく設定する必要があります。また、cordova-plugin-whitelistをインストールして構成する必要があります。アプリケーションの実行中にコンソールにエラーが表示されますか？ – geisi93

私は ''を削除して何らかの理由ですべてインストールしました。うまく動作します。そして、いいえ、私はコンソールに何のエラーもありません。 – ChasingShadows

GoogleマップJavascript APIがデバイスにデプロイされたときに機能しない

答えて

関連する問題