利用百度lbs和html5定位手机地理位置

A- A+
流年 • • 技术 • 3501 点击量 0

主要用到html5来获取手机的GPS的经纬度，然后再利用百度地图api接口获取具体位置

代码如下 


<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{height:500px;width:100%;}
		#r-result{width:100%; font-size:14px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AB8650f063ed5cb61a3073ad56608cb7"></script>
	<script src="http://lbsyun.baidu.com/skins/MySkin/resources/js/jquery-1.7.2.min.js"></script>
	<title>城市名定位</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="address">具体地址</div>
</body>
</html>
<script type="text/javascript">
	
	

	 function getLocation() {
            //获取GPS坐标
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 });
            } else {
                alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
            }
        }
      
        function showMap(value) {
            var longitude = value.coords.longitude;
            var latitude = value.coords.latitude; 
            // alert('维度：'+latitude+',经度：'+longitude);
            // 百度地图API功能
			var map = new BMap.Map("allmap");
			map.centerAndZoom(new BMap.Point(116.412092,40.05657),11);
			map.enableScrollWheelZoom(true);

			
			map.clearOverlays(); 
			var new_point = new BMap.Point(longitude,latitude);
			var marker = new BMap.Marker(new_point);  // 创建标注
			map.addOverlay(marker);              // 将标注添加到地图中
			map.panTo(new_point); 

			//根据坐标逆解析地址
            var geoc = new BMap.Geocoder();

            geoc.getLocation(new_point, function(rs){
				var addComp = rs.addressComponents;
				var address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;

				$("#address").html(address);
			});        

           
		
            
        }
         function handleError(value) {
            switch (value.code) {
                case 1:
                    alert("位置服务被拒绝");
                    break;
                case 2:
                    alert("暂时获取不到位置信息");
                    break;
                case 3:
                    alert("获取信息超时");
                    break;
                case 4:
                    alert("未知错误");
                    break;
            }
        }
         function init() {
            getLocation();
        }

        window.onload = init;
</script>


效果如图

Screenshot_2016-04-25-14-19-15.jpg

演示地址：https://www.liunianer.com/ip.html

原文链接： 利用百度lbs和html5定位手机地理位置 版权所有，转载时请注明出处，违者必究。
注明出处格式：流年不会忘却 ( https://www.liunianer.com/post-32.html )

0则回应给“利用百度lbs和html5定位手机地理位置”