|
1.地理位置信息得运用 获取用户地理位置信息，在各大网站、app中，例如淘宝，美团等购物平台已经是很常见的了。一些常见的旅游app，地图查询软件也都普遍的提供了位置定位等功能。常见的获取地理位置信息的办法是通过h5提供的地理位置功能（Geolocation API)。 2.Geolocation API 地理位置功能（Geolocation API),能确定用户位置。Geolocation API存在于navigator对象中，只包含3个方法：当前位置（getCurrentPosition）、监视位置（watchPosition）、清除监视（clearWatch）。 其中当前位置（getCurrentPosition）有三个参数：success,error,option。success是成功获取位置信息的回调函数，它是方法唯一必须的参数。error是用于捕获获取位置信息出错的情况。option是配置项，具有如下参数对象： enableHighAccuracy：指示获取位置的精确度，默认为false。如果设置为true，使用精确定位(卫星定位/GPS)。timeout：获取位置的最长等待时间，默认不限时间。maximumAge：接受不超过指定时间毫秒的缓存位置，也就是在重复获取位置时，多长时间之后再次获取位置。 如下就可以获取相应的地理位置：（获取地理位置的等待时间比较长，要耐心等待。由于在运行时就比较心急，一直没等到运行结果出现。误以为是代码错误，改了很久，发现并没有问题，只是运行时间比较长。） function getLocation(){ var options={ enableHighAccuracy:true, //精确定位 maximumAge:1000//最长时间 } if(navigator.geolocation){ //浏览器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess,onError,options); }else{ console.log('你的浏览器不支持地理定位'); //浏览器不支持geolocation } } |
3.完成过程 （1）首先在页面定义要展示地理位置的div，并设置id。（在调用地图的时候会用到id名）设置相应的样式。 <div id=“weizhi” style="width:2000px;height:1000px"></div> |
（2）利用js，获取相应的地理位置，这一步在文章第二部分已经介绍了，就不再赘述了。 （3）获取用户位置的经纬度 function onSuccess(position){ //经纬度 var longitude =position.coords.longitude; var latitude = position.coords.latitude; } |
（4）获取到了位置的经纬度，其实就成功了一半。要想位置在地图上显示出来，就需要调用地图。Geolocation可以获取用户的经纬度，那么需要做的是把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。这里就需要调用百度地图的接口，再将获取到的经纬度信息传给地图接口，就可以返回用户所在的地理位置。（如果调用百度地图，最好使用IE浏览器运行，谷歌浏览器可能显示不出来） function onSuccess(position){ var map =new BMap.Map("weizhi"); //创建一个坐标 var point =new BMap.Point(longitude,latitude); //地图初始化，设置中心点坐标和地图级别 map.centerAndZoom(point,15); } |
（5）如下就是位置获取的结果： 
图3.1 效果图 如下就是位置获取的完整代码： function getLocation(){ var options={ enableHighAccuracy:true, //精确定位 maximumAge:1000//最长时间 } if(navigator.geolocation){ //浏览器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess,onError,options); }else{ console.log('你的浏览器不支持地理定位');//浏览器不支持geolocation } } //成功时 function onSuccess(position){ //经度 var longitude =position.coords.longitude; //纬度 var latitude = position.coords.latitude; //创建地图实例 var map =new BMap.Map("container"); //创建一个坐标 var point =new BMap.Point(longitude,latitude); //地图初始化，设置中心点坐标和地图级别 map.centerAndZoom(point,15); } //失败时 function onError(error){ switch(error.code){ case 1: alert("位置服务被拒绝"); break; case 2: alert("暂时获取不到位置信息"); break; } } window.onload=getLocation; |
编 辑 | 王楠岚 责 编 | 刘 连
|
