地理位置的定位方法 |
您所在的位置：网站首页 › js定位当前地理位置的方法 › 地理位置的定位方法 |
|
一、基于原生html5的地理位置定位
缺点：基于http的请求不支持ios10,IOS10要求必须要https，我在项目中开始使用的这方法，被害惨了！IOS10怎么都定位不了，想不通为什么？后来摆渡了下才知道不支持，改成微信定位了，后面三种都兼容IOS10系统，该经纬度是基于GPS,WLAN和基站的综合因素而获得的，在使用百度地图展示时需要把该经纬度用百度地图接口转换下 示例： function getLocationByMap(){//mui.alert(2222); var options={ enableHighAccuracy:true,//表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间 maximumAge:1000,//表示浏览器重新获取位置信息的时间间隔 timeout:60000//表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback } if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(onSuccess,onError,options); }else{ //alert("该浏览器不支持获取地理位置"); mui.toast("该浏览器不支持获取地理位置"); } } function onError(error){//mui.alert(error.code); switch(error.code){ case error.PERMISSION_DENIED: //alert("用户不允许地理定位"); mui.toast("用户不允许地理定位"); break; case error.POSITION_UNAVAILABLE: //alert("无法获取当前位置"); mui.toast("无法获取当前位置"); break; case error.TIMEOUT: //alert("操作超时"); mui.toast("操作超时"); break; case error.UNKNOWN_ERROR: //alert("未知错误"); mui.toast("未知错误"); break; } } function onSuccess(position){ var longitude =position.coords.longitude;//经度 var latitude = position.coords.latitude;//纬度 //alert(longitude+"---"+latitude); }百度地图转换示例： body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} google转百度 // 百度地图API功能 //谷歌坐标 var x = 116.380318; var y = 40.102627; var ggPoint = new BMap.Point(x,y); var convertor = new BMap.Convertor(); var pointArr = []; pointArr.push(ggPoint); convertor.translate(pointArr, 3, 5, translateCallback); //坐标转换完之后的回调函数 function translateCallback(data){ console.log(data); var tclat = data.points[0]['lat']; var tclng = data.points[0]['lng']; var postioninfo = tclng + "," + tclat; document.getElementById("position").innerHTML = postioninfo; }
二、基于百度地图的定位 示例： body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} 浏览器定位 // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,15); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); alert('您的位置：'+r.point.lng+','+r.point.lat); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true})示例二： body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:100%;} p{margin-left:5px; font-size:14px;} 添加定位相关控件 // 百度地图API功能 var map = new BMap.Map("allmap"); // 添加带有定位的导航控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); // 添加定位控件 var geolocationControl = new BMap.GeolocationControl(); geolocationControl.location(); geolocationControl.addEventListener("locationSuccess", function(e){ // 定位成功事件 var address = ''; address += e.addressComponent.province; address += e.addressComponent.city; address += e.addressComponent.district; address += e.addressComponent.street; address += e.addressComponent.streetNumber; alert("当前定位地址为：" + address); console.log(); var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); // 创建点 map.addOverlay(marker); map.centerAndZoom(new BMap.Point(e.point.lng, e.point.lat), 15); }); geolocationControl.addEventListener("locationError",function(e){ // 定位失败事件 alert(e.message); }); map.addControl(geolocationControl);
三、基于腾讯地图的定位 腾讯地图开放平台在很早就支持了https的H5定位。不管是已经支持了https协议，还是依然使用http协议的web页，只要你接入了它，对于iOS 10的定位支持是无感的，都可以完美正常定位。参考链接：http://lbs.qq.com/tool/component-geolocation.html 而你只需要完成以下两步： 方式一：纯JS调用 第一步：引入js文件
第二步：创建定位对象，即可发起定位 var geolocation = new qq.maps.Geolocation("DZYBZ-73WWI-FG6GZ-5JRFR-PNVIE-4OFUL", "myapp"); geolocation.getLocation(sucCallback, errCallback); 方式二：嵌入iframe完成定位 第一步：引入定位iframe
第二步：监听事件并完成定位 window.addEventListener('message', function(event) { // 接收位置信息 var loc = event.data; console.log('location', loc); }, false); 简简单单，两步搞定。 示例： 基于地理位置的定位 #position{ text-align: center; font-size: 30px; } window.addEventListener('message', function(event) { // 接收位置信息 var loc = event.data; console.log(loc); document.getElementById("position").innerHTML = "您的位置是"+loc.city+loc.addr; //alert(loc.lat+"---"+loc.lng); }, false);
四、基于微信jsSDK的定位接口 这个略微复杂些，主要是每次页面都需要配置微信的签名算法，这个是服务端的事情，先说下前端，前端相对简单些，具体可看http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN
步骤一：绑定域名 微信限制了一个公众号使用SDK至多在三个域名下，这个是在微信公众平台后台配置的 步骤二：引入JS文件 步骤三：通过config接口注入权限验证配置 其它接口不用说了，这个getLocation是必须要定位当前位置的 wx.config({ debug: false, appId: 'wxf8b4f85f3a794e77', timestamp: 1476778508, nonceStr: '910FKqqDQWjLhkc7', signature: '6939446bc23fde967078f4397564e5804b47b9d2', jsApiList: [ 'getLocation' ] });步骤四：通过ready接口处理成功验证 调用成功必须要写在wx.ready();接口里 示例： wx.ready(function () { //获取当前地理位置 document.querySelector('#getLocation').onclick = function () { wx.getLocation({ success: function (res) { alert(JSON.stringify(res)); }, cancel: function (res) { alert('用户拒绝授权获取地理位置'); } }); }; })步骤五：通过error接口处理失败验证(可不写) 这个主要是如果调用接口失败时给用户的提示 wx.error(function (res) { alert(res.errMsg); });
|
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |