今天搞了一下网页在手机上获取当前位置信息的功能，不是很难。
展示当前的横纵坐标：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function geolocationSupport()
{
if(!navigator.geolocation)
{
alert("你的浏览器不支持HTML5 Geolocation");
}
else
{
getCurrentPosition();
}
}
function getCurrentPosition(){
var options={
enableHighAccuracy:true,
timeout:60000,
maximumAge:60000
}
navigator.geolocation.getCurrentPosition(success,error,options)
}
function success(position)
{
var x=position.coords.longitude;
var y=position.coords.latitude;
alert("经度为:"+x+"纬度为:"+y);
}
function error(err)
{
var errorTypes={
1:"用户拒绝定位服务",
2:"获取不到定位信息",
3:"获取定位信息超时"
}
alert(errorTypes[err.code]);
}
window.onload=geolocationSupport();
</script>
</body>
</html>
在百度地图上定位：
<html>
<head>
<meta charset="UTF-8"/>
<title>百度地图定位</title>
</head>
<body>
<div class="" id="map" style="width: 600px;height: 600px;">
</div>
</body>
</html>
<script src="http://api.map.baidu.com/api?v=2.0&ak=密钥" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function getLoction(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap,handleError,{enableHighAccuracy:true,maximumAge:1000});
}else{
alert("您的浏览器不支持使用HTML5来获取地理位置服务");
}
}
function showMap(value){
var longitude = value.coords.longitude;
var latitude = value.coords.latitude;
var map = new BMap.Map('map');
var point = new BMap.Point(longitude,latitude);
map.centerAndZoom(point,15);
var marker = new BMap.Marker(new BMap.point(longitude,latitude));
map.addOverlay(marker);
}
function handleError(value){
switch(value.code){
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误");
break;
}
}
function init(){
getLoction();
}
window.onload = init;
</script>
获取当前城市：
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var point = new BMap.Point(lon, lat); // 创建坐标点
// 根据坐标得到地址描述
var myGeo = new BMap.Geocoder();
myGeo.getLocation(point, function (result) {
var city = result.addressComponents.city;
alert(city);
$('body').html(city);
});
});
下面是我写的一个高德地图定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css" media="screen">
.map{border: 1px solid red;height: 500px;}
.map .info {border: solid 1px silver;background: #FFFFFF;}
.map div.info-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius: 5px 5px 0 0;}
.map div.info-top div {display: inline-block;color: #333333;font-size: 14px;font-weight: bold;line-height: 31px;padding: 0 10px;}
.map div.info-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;}
.map div.info-top img:hover {box-shadow: 0px 0px 5px #000;}
.map div.info-middle {font-size: 12px;padding: 6px;line-height: 20px;}
.map div.info-bottom {height: 0px;width: 100%;clear: both;text-align: center;}
.map div.info-bottom img {position: relative;z-index: 104;}
.map span {margin-left: 5px;font-size: 11px;}
.map .info-middle img {float: left;margin-right: 6px;}
.map .amap-info{width: 445px;}
</style>
<div class="map" id="container" style="display: none"></div>
</body>
</html>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=申请的值"></script>
<script type="text/javascript" charset="utf-8" async defer>
// 获取地理位置
function getLoction(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap,handleError,{enableHighAccuracy:true,maximumAge:1000});
}else{
alert("您的浏览器不支持使用HTML5来获取地理位置服务");
}
}
function showMap(value){
var longitude = value.coords.longitude;
var latitude = value.coords.latitude;
var map = new AMap.Map("container", {});
AMap.plugin('AMap.Geocoder',function(){
var geocoder = new AMap.Geocoder({
city: "010"//城市，默认：“全国”
});
var marker = new AMap.Marker({
map:map,
bubble:true
})
var lnglatXY=[longitude,latitude];//地图上所标点的坐标
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
//获得了有效的地址信息:
//即，result.regeocode.formattedAddress
alert(result.regeocode.addressComponent.province);
alert(result.regeocode.addressComponent.adcode);
alert(result.regeocode.addressComponent.city);
alert(result.regeocode.addressComponent.citycode);
}else{
//获取地址失败
}
});
});
//逆地理编码
}
// 如果没有获取到提示未获取到的原因
function handleError(value){
switch(value.code){
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误");
break;
}
}
// 初始化
function init(){
getLoction();
}
// 页面加载完成执行初始化
window.onload = init;
</script>
类似这种定位一般用于手机端等移动设备，PC上边总是报的是暂时获取不到位置信息。
网友评论