Google地图的地图不会在移动设备上展示

时间:2013-08-08 14:03:20

标签: javascript html google-maps jquery-mobile cordova

我目前正在使用Phonegap进行开发,并且我在使用谷歌地图API方面遇到了一些问题。

好吧,它在web导航器上运行正常,但每次我在模拟器上翻译它时,页面都会显示,但不会显示地图......而且我在控制台或logcat中没有任何错误消息

我已经在Eclipse上进行了所有自动化操作,我无法理解为什么它不能正常工作。

这是我的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Esprit Citoyen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <link href="css/jquery.mobile.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />  
    <script type="text/javascript" src="js/perso.js"></script> <!-- Affichage de la carte et gestion des pointeurs -->

    <script type="text/javascript" charset="utf-8" src="js/cordova-2.8.1.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mobile.js"></script>  
    <script type="text/javascript">
        function deviceReday(){
            document.addEventListener("deviceready", afunction, false);
    } 

    function afunction(){
        geolocalisation()
    }

    var contentMarker;
    var lattitude; //y
    var longitude; //x


    </script>

</head>
 <body onload="deviceReday()"> 
<!--<body onload="geolocalisation()">-->
<div data-role="page" data-theme="b">
  <div data-role="header" data-theme="b" class="center-wrapper"></div>
    <div data-role="content">
        <div id="id1">
            <div class="center-wrapper">
            <div class="etape">Title</div><br/><br/>
                <div id="carte" style="width:500px; height:300px;" data-theme="c"></div>

            </div>
        </div>
    </div>
  <div data-role="footer" data-theme="c"></div>
</div>

</body>
</html>

和js部分:

function geolocalisation() {
    navigator.geolocation.getCurrentPosition(initialiser, onError, {timeout:10000, enableHighAccuracy: false});
}

function onError(error) {
    console.log(error);
    alert('code: ' + error.code + '\n' +
      'message: ' + error.message + '\n');
}



function initialiser(position) {
    lattitude = position.coords.latitude;
    longitude = position.coords.longitude;
    var latlng = new google.maps.LatLng(lattitude, longitude);
    var geocoder= new google.maps.Geocoder(); 


    var options = {
        center: latlng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        mapTypeControl: false
    };

    var carte = new google.maps.Map(document.getElementById("carte"), options);


    var marqueur = new google.maps.Marker({
        position: latlng,
        map: carte
    });


    marqueur.setDraggable(true);


    google.maps.event.addListener(marqueur, 'dragend', function(event) {
        lattitude = event.latLng.lat();
        longitude = event.latLng.lng();

    console.log("long : " + lattitude + " lat : "+ longitude);
        latlng = new google.maps.LatLng(lattitude, longitude)

        geocoder.geocode({'latLng': latlng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                contentMarker = results[0].formatted_address;
                infoWindow.setContent(contentMarker);
            }else {
                alert("Geocoder failed due to: " + status);
            }
        });
    });


    var infoWindow = new google.maps.InfoWindow({
        content  : contentMarker,
        position : new google.maps.LatLng(lattitude, longitude)
    });


    google.maps.event.addListener(marqueur, 'click', function() {


        geocoder.geocode({'latLng': latlng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                contentMarker = results[0].formatted_address;
                infoWindow.setContent(contentMarker);
            }else {
                alert("Geocoder failed due to: " + status);
            }
        });
        infoWindow.open(carte,marqueur);
    });
}

欢迎任何帮助:)

0 个答案:

没有答案
相关问题