手机端H5获取当前城市的方法

移动端的H5页面提供了定位的功能,那么如何实现一个最简单的需求-----获取用户当前城市?

你可能搜一下就会找到N篇博客介绍,但是你会发现你看完大段代码之后还是没搞清楚,为了便于大家理解,我精简了代码,只保留了必要的部分。

 

1、在html页面引入百度地图API(文档地址:http://developer.baidu.com/map/wiki/index.php?title=jspopular/guide/introduction

<script src="http://api.map.baidu.com/api?ak=你的AK码&v=2.0&services=false"></script>

 

2、js代码使用h5的geolocation方法获取坐标,然后使用百度api的getlocation方法翻译成你想要得结果

 1 navigator.geolocation.getCurrentPosition(function (position) {
 2         var lat = position.coords.latitude;
 3         var lon = position.coords.longitude;
 4         var point = new BMap.Point(lon, lat);  // 创建坐标点
 5         // 根据坐标得到地址描述
 6         var myGeo = new BMap.Geocoder();
 7         myGeo.getLocation(point, function (result) {
 8             var city = result.addressComponents.city;
 9             $('body').html(city);
10         });
11     });

 

3、打开手机试一下吧


转载地址:http://www.w2bc.com/Article/72943

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值