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

时间 2019-11-19

标签手机 h5 获取当前城市方法繁體版

原文原文链接

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

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

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

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

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

 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     });

三、打开手机试一下吧jsp

若是不须要精准的定位，还有一种经过IP地址获取当前城市的方法，采用新浪的api接口。ide

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