phonegap と jQM を使用するアプリケーションがあります。ボタンをクリックしたときに地理位置情報を機能させようとしていますが、コンソールに地理位置情報が定義されていないというエラーが表示されます。エラーは onclick="getLocation()" を指しています。誰でも私を助けてもらえますか?
私のコードの例を次に示します。
<div data-role="page" id="geo" data-add-back-btn="true" onload="onBodyLoad()">
<header data-role="header" data-position="fixed">
<h1>Geolocation</h1>
</header>
<div data-role="content">
<button data-role="button" onclick="getLocation()">Click to get your current position</button>
<div id="mapholder"></div>
</div>
</div>
$("#geo").on('pageinit', function () {
console.log("Geo page loaded!");
function onBodyLoad(){
document.getElementById('geolocation').empty();
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){
phoneGapReady.innerHTML = ("")
}
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else {
x.innerHTML="Your Browser does not support Geolocation.";}
}
function showPosition(position) {
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon);
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='100%';
var myOptions= {
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:
{style:google.maps.NavigationControlStyle.SMALL}
};
var map = new
google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new
google.maps.Marker({position:latlon,map:map,title:"Your Location."});
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User did not allow Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location Data is not Available."
break;
case error.TIMEOUT:
x.innerHTML="Request Timed Out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Unknown Error."
break;
}
}
});