码迷,mamicode.com
首页 > 其他好文 > 详细

地图获取当前位置

时间:2014-12-17 16:29:43      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:地图获取当前位置   地图定位   

大家好:

今天试用了一下另外一个方法来获取当前位置,原理跟地图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>
bubuko.com,布布扣

这个方法出现的一个问题是:不知道为什么 ,请求有失败的情况……这个有点纠结啊!

相对的浏览器定位是比较简单的!

<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>
bubuko.com,布布扣这个方法是百度给出来的方法!其中也有我不明白的东西,比如
var point = new BMap.Point(116.331398,39.897445);我还真没整明白为什么给出了两个固定的值,同事说是一个中心点,不甚明白,也只能这样理解了!

地图获取当前位置

标签:地图获取当前位置   地图定位   

原文地址:http://blog.csdn.net/yingmengxuepingbao/article/details/41982283

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!