大家好:
今天试用了一下另外一个方法来获取当前位置,原理跟地图API的浏览器定位相似,相对来说 地图API浏览器中的方法更为简单,今天研究了下别人写的方法,供大家一块学习下!
一个很重要的注意事项:浏览器的标识是存在差异的!只能用手机来展示!不明所以!手机的显示是正确的,电脑却不行……(还有一个更严重的问题:我的手机居然只能显示标注,连地图都不显示!别人的手机都可以……真的不明所以啊!)
这个是GPS谷歌定位转成百度的经纬度再显示的方法:
<span style="font-size:18px;"><strong><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=7216b16c8441679ef2948d2b9a5731cc&services=false"></script>
<title>获取当前所在的位置</title>
</head>
<body>
<div id="map" style="width:100%; height:100%">
</div>
</body>
<script type="text/javascript">
(function() { // 闭包
function load_script(xyUrl, callback) {
var head = document.getElementsByTagName('head')[0]; // 这里是获取一个数组但Head只有一个所以用[0]表示。
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = xyUrl;
// 借鉴了jQuery的script跨域方法
script.onload = script.onreadystatechange = function() {
if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
callback && callback();
script.onload = script.onreadystatechange = null;
if (head && script.parentNode) {
head.removeChild(script);
}
}
};
head.insertBefore(script, head.firstChild);
}
function translate(point, type, callback) {
var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名
var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
+ "&to=4&x=" + point.lng + "&y=" + point.lat
+ "&callback=BMap.Convertor." + callbackName;
// 动态创建script标签
load_script(xyUrl);
BMap.Convertor[callbackName] = function(xyResult) {
delete BMap.Convertor[callbackName]; // 调用完需要删除改函数
var point = new BMap.Point(xyResult.x, xyResult.y);
callback && callback(point);
}
}
window.BMap = window.BMap || {};
BMap.Convertor = {};
BMap.Convertor.translate = translate;
})();
<span style="color:#ff6600;">//获取当前的地理位置
if (window.navigator.geolocation) { //Geolocation可以准确感知浏览器用户当前地理位置 此方法的3个方法:1. getCurrentPosition 获取当前地理位置2. watchPosition 监视位置信息3. clearWatch 停止获取位置信息
var options = { //options:可选参数
enableHighAccuracy: true, //boolean 是否要求高精度的地理信息
timeout:6000, //获取信息的超时限制
maximumAge:36000 //对地理信息进行缓存的时间
};
window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);//handleSuccess:当浏览器请求成功后的回调函数。handleError:请求失败的回调函数(可选)。options:可选参数
} else {
alert("浏览器不支持html5来获取地理位置信息");
}
//当浏览器请求成功后的回调函数
function handleSuccess(position){//在获取地理位置信息成功时执行的回调函数中,带有一个position参数,它是一个Geoposition对象
// 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度
var lng = position.coords.longitude;//当前地理位置的经度
var lat = position.coords.latitude; //当前地理位置的纬度。
var map = new BMap.Map("map"); // 调用百度地图api显示
var ggPoint = new BMap.Point(lng, lat);//(经度,纬度)
// 将google地图中的经纬度转化为百度地图的经纬度
BMap.Convertor.translate(ggPoint, 0, function(point){ //真实经纬度转成百度坐标 0:代表GPS,2:google坐标
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
});
}
function handleError(error){//在获取地理位置信息失败时执行的回调函数中,带有一个error参数,它是一个PositionError对象。
/* alert("获取失败!");
switch(error.code){
case error.TIMEOUT:
alert("连接超时,请重试");
break;
case error.PERMISSION_DENIED:
alert("您拒绝了使用位置共享服务,查询已取消");
break;
case error.POSITION_UNAVAILABLE:
alert("非常抱歉,我们暂时无法为您所在的星球提供位置服务");
break;
} */
}</span>
</script>
</html> </strong></span>
这个方法出现的一个问题是:不知道为什么 ,请求有失败的情况……这个有点纠结啊!
相对的浏览器定位是比较简单的!
<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=您的密钥"></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,12);
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})
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
</script>
var point = new BMap.Point(116.331398,39.897445);我还真没整明白为什么给出了两个固定的值,同事说是一个中心点,不甚明白,也只能这样理解了!