2016-06-03 5 views
0

Привет, я начинаю использовать phonegap, я пытаюсь интегрировать позицию на Google Maps в своем приложении. Мне не показывают, если я делаю это в чистом проекте, но в моем проекте нет. index.htmlкарта не отображается на телефоне

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Ceifer</title> 
    <link rel="stylesheet" href="themes/ceifer.min.css" /> 
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
    <link rel="stylesheet" href="css/custom.css" />  
    <script type="text/javascript" src="cordova.js"></script> 
    <script src="js/geolocalizacion.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKmWHtohFZPTI7tjCPrYYFuEbgHRIrNRE"> </script> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="js/config.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 

    <!-- Pagina de Login --> 
    <div data-role="page" id="login" data-theme="d"> 
     <div data-role="header" data-position="inline"> 
      <a href="#inicio" data-role="button" data-icon="home" data-iconpos="notext"></a> 
      <h1>Ceifer</h1> 
     </div> 
     <div data-role="content" data-theme="d"> 
      <div id="map"></div> // here load map 
     </div> 
     <div data-role="footer" data-theme="d" data-position="fixed"> 
      <h4>Ceifer &copy;</h4> 
     </div> 
    </div> 
    <!-- Fin de Login --> 

geolocalizacion.js

var app = { 

    initialize: function() { 
     this.bindEvents(); 
    }, 

    bindEvents: function() { 
     document.addEventListener('deviceready', this.onDeviceReady, false); 
    }, 

    onDeviceReady: function() { 

     navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError); 
    }, 

    onSuccess: function(position){ 
     var longitude = -3.6038057000000663; 
     var latitude = 37.1708286; 
     var latLong = new google.maps.LatLng(latitude, longitude); 

     var mapOptions = { 
      center: latLong, 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

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

     var marker = new google.maps.Marker({ 
       position: latLong, 
       map: map, 
       title: 'my location' 
      }); 
    }, 

    onError: function(error){ 
     alert("the code is " + error.code + ". \n" + "message: " + error.message); 
    }, 
}; 

app.initialize(); 

Где проблема? Благодаря

+0

Для уверенности: включено ли подключение Wi-Fi? К сожалению, карта не отображается без подключения Wi-Fi – Zappescu

+0

Да, Wi-Fi включен –

ответ

0

Несколько вещей, которые нужно проверить:

  • подключения к Интернету
  • Высота & Ширина DIV с идентификатором, как «карта»
  • Вы уверены OnSuccess идентификатор вызывался

Отладить приложение с помощью инструмента для создания кромок и проверить, есть ли что-нибудь внутри div с картой, а также проверить сетевую вкладку, чтобы проверить, есть ли какая-либо проблема в сети.

 Смежные вопросы

  • Нет связанных вопросов^_^