HTML5获取地理位置定位信息(1)

本文介绍了HTML5的Geolocation API如何获取用户的经纬度,并通过百度地图和谷歌地图接口将这些信息转化为具体的地理位置信息,包括省市区等详细地址。文章中展示了使用Ajax与地图API交互的示例代码,帮助前端开发者实现定位功能。
摘要由CSDN通过智能技术生成

break;
}
}

我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。

function showPosition(position){
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
alert(\‘纬度:\’+lat+\‘,经度:\’+lag);
}

利用百度地图和谷歌地图接口获取用户地址

上面我们了解了HTML5的Geolocation可以获取用户的经纬度,那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口,我们只需要将HTML5获取到的经纬度信息传给地图接口,则会返回用户所在的地理位置,包括省市区信息,甚至有街道、门牌号等详细的地理位置信息。

我们首先在页面定义要展示地理位置的div,分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互,我们将经纬度信息通过Ajax方式发送给百度地图接口,接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据,我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库,需要先加载jQuery库文件。

function showPosition(position){
var latlon =
position.coords.latitude+\‘,\’+position.coords.longitude;
//baidu
var url =
\“http://api.m

  • 11
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值