🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### 使用定位服务 **HTML5中为我们提供了定位API能够让我们实现获取经纬度等位置信息。** **可以通过**`navigator.geolocation`**来获取设备的当前位置,返回一个位置对象。** > **我们主要使用**`getCurrentPosition()`**这个方法。** > 使用方法`navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]);` successCallback返回一个地理数据对象position作为参数,该对象有属性timestamp和coords。timestamp表示该地理数据创建时间(时间戳);coords包括另外七个属性: * coords.latitude:估计纬度 * coords.longitude:估计经度 * coords.altitude:估计高度 * coords.accuracy:所提供的以米为单位的经度和纬度估计的精确度 * coords.altitudeAccuracy:所提供的以米为单位的高度估计的精确度 * coords.heading: 宿主设备当前移动的角度方向,相对于正北方向顺时针计算 * coords.speed:以米每秒为单位的设备的当前对地速度 ``` navigator.geolocation.getCurrentPosition(function(position){ var lat = position.coords.latitude; var lon = position.coords.longtitude; console.log(lat+" "+lon); }, function(error){ console.log(error); }); ``` >好像尴尬了!HTML5的定位是去请求googleapis.com,可是国内的网络环境。。。 **所以,我们只能求助于百度地图了!** 首先要去百度开发者,注册应用 然后引入百度地图的js文件 ```js <script src="http://api.map.baidu.com/api?v=2.0&ak=y4ks32wpzCHXIl6HIbuQeHSbGPEE2gkF" type="text/javascript"></script> ``` 使用百度地图提供的方法。 注意,getLocation的回调函数需要一定时间等待才被调用。 ```js var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { currentLat = r.point.lat; currentLon = r.point.lng; var pt = new BMap.Point(currentLon, currentLat); var geoc = new BMap.Geocoder(); geoc.getLocation(pt, function (rs) { var addComp = rs.addressComponents; var city = addComp.city; console.log(city); //将城市后面的市去掉 console.log(city.slice(0,-1)); cityText = city.slice(0,-1); var city = encodeURIComponent(cityText); var key = 'f83bb390e68599c746b9124b7b21fbc8'; var url = "http://v.juhe.cn/weather/index?format=2&cityname="+city+"&key="+key; getData(url); }) }; }); ```