OnDeviceReady隐藏功能?

时间:2013-10-16 05:09:25

标签: javascript jquery html appmobi

很抱歉这是相当的代码而且代码完全相关,因为我不知道问题是什么,代码可能太难以阅读了我倾向于先写清理以后但是希望有人会知道发生了什么。问题是我无法通过html中的按钮调用任何函数,因为它们出现“未定义”。我认为它们可能以某种方式包含在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空间的东西搞砸了比以前更多。

1 个答案:

答案 0 :(得分:0)

你有

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

并且

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

在phonegap应用程序中,您无法直接连接到localhost以访问上面的URL,无论是将它们托管在远程服务器上还是使用ur计算机ip而不是localhost。它应该是

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

还要检查你是否允许访问config.xml中的jquery