主要用到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>
效果如图
0则回应给“利用百度lbs和html5定位手机地理位置”