首页 > 代码库 > html5关于定位功能的实现
html5关于定位功能的实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"-->
<title>定位</title>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-2.0.3.min.js"></script>
<!-- <link href="http://www.mamicode.com/css/style.css" rel="stylesheet" type="text/css"/>-->
<script>
function getUserLocation(){
//check if the geolocation object is supported,if so get position
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(displayLocation,displayError);
else
document.getElementById("locationData").innerHTML="Sorry-your browser doesn‘t support geolocation !";
}
function displayLocation(position){
$.post(‘process.php‘,‘latitude=‘ + position.coords.latitude + ‘&longitude=‘ + position.coords.longitude,function(d){
console.log(d);
var arr = JSON.parse(d);
//alert(arr[0].name);
var x;
for (x in arr)
{
document.write(‘id:‘+ arr[x].id + ‘ 店名：‘+arr[x].name + ‘ 距离‘+arr[x].distance + ‘ 地址‘+arr[x].address + "<br />")
}
//document.getElementById("locationData").innerHTML=arr;
});
}
function displayError(error) {
//get a reference to the HTML element forwriting result
var locationElement =$("locationData");
//find out which error we have, output message accordingly
switch(error.code) {
case error.PERMISSION_DENIED:
locationElement.innerHTML= "Permission was denied";
break;
case error.POSITION_UNAVAILABLE:
locationElement.innerHTML= "Location data not available";
break;
case error.TIMEOUT:
locationElement.innerHTML= "Location request timeout";
break;
case error.UNKNOWN_ERROR:
locationElement.innerHTML= "An unspecified error occurred";
break;
default:
locationElement.innerHTML= "Who knows what happened…";
break;
}
}
</script>
</head>
<body>
<input type="button" value="http://www.mamicode.com/get location" onclick="getUserLocation()"/>
<div id="locationData">
Location data here
</div>
</body>
</html>
<?php
/**
* 后台处理
* 附近分店 API For 麦当劳
*/
header(‘Content-Type: application/json; charset=utf-8‘);
require "config.php";
require "android_get_mkq_shop_controller.php";
$latitude = $_REQUEST[‘latitude‘]; //维度
//$latitude = 39.90403; //维度
$longitude = $_REQUEST[‘longitude‘]; //经度
//$longitude = 116.4075; //经度
$data = http://www.mamicode.com/get_mkq_shop($latitude,$longitude);
$memcache = new Memcache;
if ($memcache->connect(‘localhost‘, 11211) && USE_MEMCACHE) {
$memcache_key = ‘android_mkq_get_mkq_shop‘.$latitude.‘_‘.$longitude;
if (!$data = http://www.mamicode.com/$memcache->get($memcache_key)) {
$data = http://www.mamicode.com/get_mkq_shop($latitude,$longitude);
$memcache->set($memcache_key,$data,false,900); // cache time 15 mins
}
}else{
$data = http://www.mamicode.com/get_mkq_shop($latitude,$longitude);
}
echo json_encode($data);
?>
html5关于定位功能的实现