Question

html5怎么实现调用gps获取地理位置具体代码

Answer 1

代码如下:

/**
* 以下为html5代码,获取地理位置
*/
function getLocation() {
//检查浏览器是否支持地理位置获取
if (navigator.geolocation) {
//若支持地理位置获取,成功调用showPosition(),失败调用showError
// alert("正在努力获取位置...");
var config = { enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 };
navigator.geolocation.getCurrentPosition(showPosition, showError, config);
} else {
//alert("Geolocation is not supported by this browser.");
alert("定位失败,用户已禁用位置获取权限");
}
}
/**
* 获取地址位置成功
*/
function showPosition(position) {
//获得经度纬度
var x = position.coords.latitude;
var y = position.coords.longitude;
//配置Baidu Geocoding API
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b" +
"&callback=renderReverse" +
"&location=" + x + "," + y +
"&output=json" +
"&pois=0";
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
success: function (json) {
if (json == null || typeof (json) == "undefined") {
return;
}
if (json.status != "0") {
return;
}
setAddress(json.result.addressComponent);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("[x:" + x + ",y:" + y + "]地址位置获取失败,请手动选择地址");
}
});
}
/**
* 获取地址位置失败[暂不处理]
*/
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
//x.innerHTML = "User denied the request for Geolocation.[用户拒绝请求地理定位]"
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
//x.innerHTML = "Location information is unavailable.[位置信息是不可用]"
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
//x.innerHTML = "The request to get user location timed out.[请求获取用户位置超时]"
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
//x.innerHTML = "An unknown error occurred.[未知错误]"
break;
}
}
/**
* 设置地址
*/
function setAddress(json) {
var position = document.getElementById("txtPosition");
//省
var province = json.province;
//市
var city = json.city;
//区
var district = json.district;
province = province.replace('市', '');
position.value = province + "," + city + "," + district;
position.style.color = 'black';
}

Answer 2

<script>
var x=document.getElementById("demo");
function getLocation(){
  if (navigator.geolocation){
     navigator.geolocation.getCurrentPosition(showPosition);
  }else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position){
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

追问

不懂 可不可以写的全面一点啊

追答

已经非常详细！

追问

不行的 怎么转换成地图呈现出来啊

追答

地图，和取坐标，两码事。

如百度地图，有接口设置当前的坐标的

function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
alert( "Geolocation is not supported by this browser." );
}
}
function showPosition(position){
var point=new BMap.Point(position.coords.longitude, position.coords.latitude);
map.centerAndZoom(point, 16);
}

追问

html5做出来的误差很大啊 有什么办法减少误差啊

Answer 3

1、 百度直接搜【百度地图调用】，点击出现的第二个网站，进入这个网站即可。

2、 进入这个网站后，首先得输入自己需要定位的地点。这里输入【上海】这个城市，输入后点击【查找】选项。

3、  开始地图添加【地图标注】，点击这个【小棒子】图标，然后在需要标注的地方鼠点击一下，输入需要修改的名称和备注，然后点击【保存】按钮。

4、可以看到自己添加的地理位置所显示出的效果了。

5、然后点击底部的【获取代码】，再点击【复制代码】即可。

6、在vs2012里面新建一个【html】文件，然后把刚刚复制过来的代码直接粘贴到里面，点击运行。

7、这个是在【谷歌浏览器】里面运行出来的，在本地的百度地图显示出地理位置的效果图。可以看到，已经成功地调用了百度地图的API接口了。