百度地图 JavaScript 浏览器定位获取当前位置信息（名称，经纬度）

最新推荐文章于 2025-05-27 17:03:00 发布

匠心精神

最新推荐文章于 2025-05-27 17:03:00 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：百度地图当前位置 JavaScript 浏览器经纬度

本文链接：https://blog.youkuaiyun.com/qq_36623327/article/details/90764502

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍百度地图API的使用方法，包括如何在网页中嵌入地图，设置地图的中心点和缩放级别，实现鼠标滚轮缩放，获取当前位置，并通过地理编码获取详细地址信息。同时，展示了如何使用Geolocation API获取用户地理位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<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=你的AK"></script>
  <title>地图展示</title>
</head>
<body>
  <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");    // 创建Map实例

  var point = new BMap.Point(116.331398,39.897445);
  map.centerAndZoom(point,30);

  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  //添加地图类型控件
  map.setCurrentCity("北京");          

    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);
      point = r.point;
      console.log(r.point.lng+','+r.point.lat);
      alert('您的位置：'+r.point.lng+','+r.point.lat);
      getName();
    }
    else {
      alert('failed'+this.getStatus());
    }        
  },{enableHighAccuracy: true})


function getName(){
      var geoc = new BMap.Geocoder();
      geoc.getLocation(point, function(rs){
      var addComp = rs.addressComponents;
      console.log(addComp);
      alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });
}
</script>