韩震博客|关注于学习java与交流

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

somnus 2017年11月07日 web前端 51 0

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

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

 

1、在html页面引入百度地图API(文档地址:jspopular/guide/introduction" target="_blank" style="margin: 0px; padding: 0px; outline: none; color: black;">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方法翻译成你想要得结果

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;
            $('body').html(city);
        });
    });

 

3、打开手机试一下吧

 

如果不需要精准的定位,还有一种通过IP地址获取当前城市的方法,采用新浪的api接口。

<script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script><script>
    var city = remote_ip_info['city'];
    alert(city)
</script>


转载请注明出处:红色火线java加油站!http://hongsehuoxian.com
看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于手机端H5获取当前城市的方法的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
移动web开发浅谈之那些我们需要知道的基础
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信