2013-10-16 116 views
0

对不起,这是相当的,但代码是相关的,因为我不知道问题是什么,也可能是代码太难以阅读我倾向于先写清理,但希望有人知道发生了什么。问题是我不能从HTML中的按钮调用任何函数,因为它们出来“未定义”。我认为这可能是他们以某种方式包装在onDeviceReady()函数中,因此它们实际上并没有定义它们消失的实例。但无论我尝试什么,我都无法修复它。OnDeviceReady隐藏功能?

<html> 
<head> 

<title>Geolocation</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">   </script> 
    <link href="retrieveCSS.css" rel="stylesheet" type="text/css" /> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 

<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" language="javascript"> 
     function onDeviceReady() 
     { 

      AppMobi.device.hideSplashScreen(); 
     } 
     document.addEventListener("appMobi.device.ready",onDeviceReady,false); 
    </script> 
<script type="text/javascript"> 

$(document).ready(function() { 
var beachMarker; 
var locations = new Array(); 


var _map = null; 
var _seconds = 2; 
var _llbounds = null; 



function drawMap() 
{ 

    var url = "http://localhost/getloc.php"; 
    var data; 
    var lat; 
    var lng; 
    var latlng = new google.maps.LatLng(currentLatitude,currentLongitude); 
    var rendererOptions = 
    { 
     draggable: true 
    }; 
    var mapOptions = 
    { 
     zoom:14, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.HYBRID, 
     zoomControl:false, 
     disableDefaultUI: true, 
    }; 
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
    $.get(url, data, function (data) 
    { 
     for (var i = 0; i < data.length; i++) 
     { 

      locations[i] = data[i]; 
     } 
    }, 'json') 
    .done(function() { 
     setMarkers(); 
    }); 

    _map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    directionsDisplay.setMap(_map); 

} 


var currentLatitude; 
var currentLongitude; 
var options = { 
       timeout: 1000, 
       maximumAge: 2000, 
       enableHighAccuracy: true 
       }; 
var suc = function(p) 
{ 
    if(_map == null) 
    { 
     currentLatitude = p.coords.latitude; 
     currentLongitude = p.coords.longitude; 
     drawMap(); 
    } 

    var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude); 
      var status = AppMobi.cache.getCookie("statusCookie"); 
      var name = AppMobi.cache.getCookie("usernameCookie"); 
      var location = p.coords.latitude + ", " + p.coords.longitude; 
      var url = "http://localhost/pickmeup.php"; 
      var data = 'name=' +name+'&location='+location+'&status='+status; 
        $.post(url, data, function (data) 
        { 


        }); 

      var posting = $.post(url, { 
         name: name, 
         location: location, 
         status: status 
        }); 

      if (status == "green") 
      { 
       curIcon = "greenicon.png"; 
      } 
      else if (status == "yellow") 
      { 
       curIcon = "yellowicon.png"; 
      } 
      else if (status == "red") 
      { 
       curIcon = "redicon.png"; 
      } 

      var image = new google.maps.MarkerImage(
       'images/marker.png', 
       new google.maps.Size(32, 32), 
       new google.maps.Point(0,0), 
       new google.maps.Point(16,32) 
      ); 
      if (beachMarker != null) 
      { 
       beachMarker.setMap(null); 
      } 
      beachMarker = new google.maps.Marker({ 
      position: myLatLng, 
      map: _map, 
      icon: curIcon 
      }); 
}; 

var fail = function() 
{ 
    console.log("Geolocation failed. \nPlease enable GPS in Settings.",1); 
}; 



//AppMobi is ready to roll 
function onDeviceReady() 
{ 
    try 
    { 
     if (AppMobi.device.platform.indexOf("Android")!=-1) 
     { 
      AppMobi.display.useViewport(480,480); 
      document.getElementById("map_canvas").style.width="480px"; 
     } 
     else if (AppMobi.device.platform.indexOf("iOS")!=-1) 
     { 
      if (AppMobi.device.model.indexOf("iPhone")!=-1 || AppMobi.device.model.indexOf("iPod")!=-1) 
      { 
       AppMobi.display.useViewport(320,320); 

      } 
      else if (AppMobi.device.model.indexOf("iPad")!=-1) 
      { 
       AppMobi.display.useViewport(768,768); 
       document.getElementById("map_canvas").style.width="768px"; 
      } 
     } 

     if (AppMobi.geolocation != null) 
     { 
      AppMobi.geolocation.watchPosition(suc,fail,options); 
     } 
    } 
    catch(e) 
    { 
     alert(e.message); 
    } 

    try 
    { 
     //lock orientation 
     AppMobi.device.setRotateOrientation("portrait"); 
     AppMobi.device.setAutoRotate(false); 
    } 
    catch(e) {} 

    try 
    { 
     //manage power 
     AppMobi.device.managePower(true,false); 
    } 
    catch(e) {} 

    try 
    { 
     //hide splash screen 
     AppMobi.device.hideSplashScreen(); 
    } 
    catch(e) {}  
} 

//initial event handler to detect when appMobi is ready to roll 
document.addEventListener("appMobi.device.ready",onDeviceReady,false); 
    function setMarkers() { 

for (var i = 0; i < locations.length; i++) { 
var locStatusString = locations[i].split("!",3); 
      var loc = locStatusString[0]; 
      var status = locStatusString[1]; 
      var user = locStatusString[2]; 
      if (user != AppMobi.cache.getCookie("usernameCookie")) 
      { 
     var latlngStr= loc.split(",",2); 
      var lat = latlngStr[0]; 
      var lng = latlngStr[1]; 

var markerLatLng = new google.maps.LatLng(lat,lng); 
var curicon; 

      if (status == "green") 
      { 
       curIcon = "greenicon.png"; 
      } 
      else if (status == "yellow") 
      { 
       curIcon = "yellowicon.png"; 
      } 
      else if (status == "red") 
      { 
       curIcon = "redicon.png"; 
      } 

       var image = new google.maps.MarkerImage(
'images/marker.png', 
new google.maps.Size(32, 32), 
new google.maps.Point(0,0), 
new google.maps.Point(16,32) 
); 
     var marker = new google.maps.Marker({ 
     position: markerLatLng, 
     map: _map, 
     icon: curIcon 
    }); 

    } 
} 
} 

}); 

</script> 

</head> 


<body> 
    <div id="afui" class='ios'> 

<div id="header"></div> 

<div id="content" style=""> 

<div class="panel" title="Give A Ride" data-nav="nav_0" id="page_3" style="" data-appbuilder-object="page"> 
<button onclick = "drawMap()" type="button">Click Me!</button> 
<div id="map_canvas" style="top: 20%;position:absolute; width:100%;height:80%;text- align:center;"></div> 
</div> 

      </div> 
      </div> 

</body> 
</html> 

也抱歉格式化这整个4空间的东西搞砸了比以前更多。

+0

是否有在控制台的任何错误? –

+0

唯一的错误是当单击该按钮时“drawMap()未定义”。如果按钮没有被点击,一切都很好,包括从ondeviceready();调用的drawMap()函数。 此外,如果我只是坚持“警报(”嗨“);”在onclick它会触发,所以它没有按钮本身的错误。 – DasBeasto

回答

0

你有

url: "http://localhost/getloc.php"; 

而且

url = "http://localhost/pickmeup.php"; 

在PhoneGap的应用程序,你不能直接连接到本地主机访问上述网址所托管它们的远程服务器上,或使用乌尔计算机的IP,而不是本地主机。它应该是

var url = "http://192.168.1.123/pickmeup.php";  or url="http://someserver.com/pickmeup.php"; 

而且还要检查是否u必须允许访问的jQuery config.xml中

+0

是的,我在发布这个问题后的某个时候修复了localhost problemm,这个代码仍然是一个正在进行的工作,它不打算很快被远程访问。是的,jquery工作正常,只是没有按钮点击后。 – DasBeasto