Question

您好我开始使用phonegap，我正在尝试在我的应用中集成谷歌地图中的位置。如果我在一个干净的项目中工作，我不会展示，但在我的项目中没有。的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();

问题出在哪里？感谢

Answer 1

您需要检查的几件事情：

互联网连接
身高＆amp; id的宽度为＆＃34; map＆＃34;
您确定onSuccess id被调用

使用chrome开发人员工具调试应用程序，并检查div中是否有任何显示地图的内容，同时检查网络选项卡以检查是否存在任何网络问题。

地图未显示在phonegap上

1 个答案: