2017-08-03 3 views
1

Ich habe einfache Apps, Apps zeigen eine Karte. Ich baue mit Cordova. Ich habe Erfolg, um meinen Standort zu bekommen, aber nicht Erfolg, Karte anzuzeigen.Kann Google Map nicht in meinen Android-Apps anzeigen

Hier ist mein Code:

<script> 
     function onDeviceReady() { 

     var options = { frequency: 3000 }; //THIS I SPECIFY INTERVAL TIME TO SEND POSITIONS 
      var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 3000 }); 
      } 


     function onSuccess(position) //IF SUCCESS 
     { 

     var element = document.getElementById('location_note'); 
     var lat=position.coords.latitude; 
     var lang=position.coords.longitude; 

     var myLatlng = new google.maps.LatLng(lat,lang); 

     var mapOptions={center : new google.maps.LatLng(lat,lang),zoom :4,mapTypeId: google.maps.MapTypeId.ROADMAP}; 

     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng='+position.coords.latitude+','+position.coords.longitude+'&sensor=false', function(data) { 
     alamats = data.results[0];//aRRAy to capture address details 
     al=alamats.formatted_address; //variable to capture Address 
     }); 


     element.innerHTML="";//APPEND ADDRESS INFO 
     element.innerHTML = '<center><p><font color="#FFFFFF" face="arial" size="4"> ' + al + '</font><br />' + '</p></center>'; //Success to Display My Address 

      } 

      function onError(error) { 
       alert('code: ' + error.code + '\n' +'message: ' + error.message + '\n'); 
      } 
    </script> 
    <body> 
    <div id="my_location">Address Info here</div> 
    <div id="map_canvas">PETA</div> 
    </body> 

Ich habe die Adresse info, aber die Karte nicht gezeigt ist.

Antwort

0

einen Stil auf der Karte hinzufügen:

<style> 
    #map_canvas { 
     height: 100%; 
     width: 100%; 
    } 
</style> 

Auch, wie Google Maps funktioniert nicht ein Gerät benötigen, können Sie es testen und zu debuggen in Ihrem Browser. Führen Sie dies in Ihrem App-Verzeichnis aus:

ionic serve -c -s 

Drücken Sie F12 im Browser und bearbeiten Sie es nach Ihren Wünschen. Und vergessen Sie nicht, die Registerkarte Console zu überwachen, um mögliche Fehler zu sehen (wie die, die Sie in dem von Ihnen geposteten Code haben, my_location -> location_note). Werfen Sie einen Blick auf die testing docs.

In jedem Fall würde ich die App auf den minimalen Ausdruck vereinfachen, um zu versuchen, es zum Arbeiten zu bringen und Fehler zu vermeiden (entfernen Sie Geolocation-Code, Hardcode-Center-Speicherort, etc).

Nehmen Sie diesen Kolben als Beispiel: https://plnkr.co/edit/gEm60LZwxS2tggceBKOf?p=preview und die google maps hello world example.

Verwandte Themen