1

我已经尝试了很多方法来在在线提供的 phonegap 应用程序中显示 mapView。但仍然无法正常工作。这是我的代码。希望有人可以帮助我解决问题提前谢谢

这是 map.js 文件代码

function onMapLoad(){
        if(isConnected){
            //load google api
            var fileref=document.createElement('script');
            fileref.setAttribute("type","text/javascript");
            fileref.setAttribute("src","http://maps.googleapis.com/maps/api/js?sensor=true&callback="+"getGeolocation");
            document.getElementByTagName("head")[0].appendChild(fileref);
        }
        else{
            alert("Must be connected to the internet");
        }
    }



 function getGeolocation(){
    var options ={
    maximumAge:3000,
    timeout:5000,
    enableHighAccuracy:true
    };
    navigator.geolocation.getCurrentPosition(loadMap,geoError,options);
   }

  function loadMap(position){
var latlng = new google.maps.LatLng(
                                    position.coords.latitude,position.coords.longitude);
var myOptions ={
zoom:8;
center:latlng,
myTypeId:google.maps.MapTypeId.ROADMAP
};
var mayObj = document.getElementById("map_canvas");
var map = new google.maps.Map(mapObj,myOptions);
var marker = new google.maps.Marker({
                                    position:latlng,
                                    map:map,
                                    title:"You"

                                    });
 }
  function geoError(error){
alert('code: '+error.code +'\n' +'message: '+error.message +'\n');
 }
  $(document).bind("pageload",onMapLoad);

这是 map.html 文件

 <!DOCTYPE html>
 <html>
<head>
    <title>Map page</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,    minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.css" />
    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>

       </head>
<body>
    <div data-role ="page" id="map-page">
    <div id ="map_canvas" style =" width:300px; height:400px">
    </div>
         <script type="text/javascript" charset ="utf-8" src="js/map.js"></script>
        </div>
</body>
</html>
4

0 回答 0