html5定位获取当前位置并在百度地图上显示

发布时间:2018年05月07日      浏览次数:940 次
<!DOCTYPE html>
<html lang="zh-cn">
<head>
      <title>获取定位信息</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#map_title{ clear:both; width:100%;}
#map{ clear:both; width:100%; min-height:400px; margin:10px auto; border:1px #ddd solid; }
#mapInfo{ clear:both; width:100%; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里是您的百度API的AK码(没有可上http://lbsyun.baidu.com/apiconsole/record申请)"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script>
$(function(){
      navigator.geolocation.getCurrentPosition(translatePoint); //定位
});
function translatePoint(position){
      var currentLat = position.coords.latitude;
      var currentLon = position.coords.longitude;
      var gpsPoint = new BMap.Point(currentLon, currentLat); //坐标
      BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标
}
function initMap(point){
      //初始化地图
      map = new BMap.Map("map");
      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.centerAndZoom(point, 15);
      map.addOverlay(new BMap.Marker(point))
}
//显示定位详细信息
var geoc = new BMap.Geocoder();
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
      if(this.getStatus() == BMAP_STATUS_SUCCESS) {
            document.getElementById("mapInfo").innerHTML = '您的具体位置信息:<br />经度:' + r.point.lng + '<br />纬度:' + r.point.lat;//经度,纬度
            geoc.getLocation(r.point, function(rs) {
                  var addComp = rs.addressComponents;
                  document.getElementById("mapInfo").innerHTML += '<br />地址:' + addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//详细地址
            });
      } else {
            document.getElementById("mapInfo").innerHTML = 'failed' + this.getStatus();
      }
}, { enableHighAccuracy: true });
</script>
</head>
<body>
<div id="map_title">获取定位信息</div>
<div id="map"></div>
<div id="mapInfo"></div>
<script>getPosition();</script>
</body>
</html>
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!