申し訳ありませんが、これはかなりのコードですが、問題が何であるかがわからないため、コードはすべて関連しています。また、コードが読みにくい可能性があります。最初にクリーンアップを後で書く傾向がありますが、誰かが何が起こっているのかを知ってくれることを願っています. 問題は、「未定義」になるため、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 つのスペース全体の書式設定が、以前よりもさらに台無しになってしまい、申し訳ありません。