一、基于原生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);
}百度地图转换示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的AK"></script>
<title>google转百度</title>
</head>
<body>
<div id="position">
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图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;
}
</script>
二、基于百度地图的定位
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的ak&s=1"></script>
<title>浏览器定位</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图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})
</script>示例二：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:100%;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的AK&s=1"></script>
<title>添加定位相关控件</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图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);
</script>
三、基于腾讯地图的定位
腾讯地图开放平台在很早就支持了https的H5定位。不管是已经支持了https协议，还是依然使用http协议的web页，只要你接入了它，对于iOS 10的定位支持是无感的，都可以完美正常定位。参考链接：http://lbs.qq.com/tool/component-geolocation.html
而你只需要完成以下两步：
方式一：纯JS调用
第一步：引入js文件
<scarpt src="http://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js" />
第二步：创建定位对象，即可发起定位
var geolocation = new qq.maps.Geolocation("DZYBZ-73WWI-FG6GZ-5JRFR-PNVIE-4OFUL", "myapp");
geolocation.getLocation(sucCallback, errCallback);
方式二：嵌入iframe完成定位
第一步：引入定位iframe
<iframe id="geoPage" width=0 height=0 frameborder=0 style="display:none;" scrolling="no"
src="https://apis.map.qq.com/tools/geolocation?key=您的KEY&referer=myapp">
</iframe>
第二步：监听事件并完成定位
window.addEventListener('message', function(event) {
// 接收位置信息
var loc = event.data;
console.log('location', loc);
}, false);
简简单单，两步搞定。
示例：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于地理位置的定位</title>
<style type="text/css">
#position{
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<iframe id="geoPage" width=0 height=0 frameborder=0 style="display:none;" scrolling="no"
src="https://apis.map.qq.com/tools/geolocation?key=您的key&referer=myfirstapp">
</iframe>
<div id="position">
</div>
<div id="jingwei">
</div>
</body>
<script type="text/javascript">
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);
</script>
</html>
四、基于微信jsSDK的定位接口
这个略微复杂些，主要是每次页面都需要配置微信的签名算法，这个是服务端的事情，先说下前端，前端相对简单些，具体可看http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN
步骤一：绑定域名
微信限制了一个公众号使用SDK至多在三个域名下，这个是在微信公众平台后台配置的
步骤二：引入JS文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>步骤三：通过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);
});
2917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
