移動端的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方法翻譯成你想要得結果（不準確）

 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.用高德地圖（比較準確）

html

     <div id="container" style="display: none;"></div>

js

	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=您的key"></script>

 var map, geolocation;//載入地圖，呼叫瀏覽器定位服務
	map = new AMap.Map('container', {
	resizeEnable: true
	});
	map.plugin('AMap.Geolocation', function() {
	   geolocation = new AMap.Geolocation({
			enableHighAccuracy: true, 
			timeout: 10000 
			});
	    geolocation.getCityInfo(getCity)
	});
	function getCity(status, result) {
		if(status!='complete'){
		  console.log(status)
		  showToast('定位失敗');
		}else{
		  console.log(result.city)
		}
	}
 

4、開啟手機試一下吧

如果不需要精準的定位，還有一種通過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>