用百度地图api获取当前定位，获取经纬度——前端笔记

最新推荐文章于 2024-12-01 02:20:34 发布

我这头发越来越多呀

最新推荐文章于 2024-12-01 02:20:34 发布

阅读量2.4k

点赞数

分类专栏：前端笔记文章标签：前端笔记

本文链接：https://blog.csdn.net/weixin_42128648/article/details/131792483

版权

前端笔记专栏收录该内容

7 篇文章

订阅专栏

该代码示例展示了如何创建一个HTML页面，其中包含一个按钮。当用户点击按钮时，会调用getLocation()函数，利用百度地图API获取用户的当前位置经纬度，并将这些信息填充到文本框中。同时，它会在地图上标记当前位置并显示信息窗口。如果定位失败，会弹出警告消息。

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

问题：

做一个按钮，点击后可以获取到当前位置的经纬度，并渲染地图。

效果如下:

在这里插入图片描述

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>获取当前定位测试</title>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=2EWGBqHFvYho6e3BGr5yaHTbS0SC86XI"></script>//需要有自己的自己的百度ｋｅｙ
    <script type="text/javascript" src="static/js/jquery-2.0.2.js"></script>
</head>

<body>
<div>
    <input type="button" value="获取定位" onclick="getLocation()"/>
    经度：<input type="text" id="jingdu"/>
    维度：<input type="text" id="weidu"/>
</div>
</br>
<div id="mapContainer" style="width: 100%; height: 400px;"></div>
</body>
</html>
<script type="text/javascript">
    function getLocation() {
        // 创建地图实例
        var map = new BMap.Map("mapContainer");

        // 创建定位控件实例
        var geolocation = new BMap.Geolocation();

        // 开启定位控件
        geolocation.enableSDKLocation();

        // 获取当前位置
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                // 获取经纬度信息
                var lng = r.point.lng;
                var lat = r.point.lat;

                $("#jingdu").val(lng);//回填经度
                $("#weidu").val(lat);//回填维度
                // 在地图上标注当前位置
                var marker = new BMap.Marker(r.point);
                map.addOverlay(marker);

                // 居中显示地图，并设置缩放级别
                map.centerAndZoom(r.point, 16);

                // 在信息窗口中显示经纬度信息
                var infoWindow = new BMap.InfoWindow("经度: " + lng + "<br>纬度: " + lat);
                marker.addEventListener("click", function(){
                    this.openInfoWindow(infoWindow);
                });

            }
            else {
                alert("无法获取当前位置信息。");
            }
        },{enableHighAccuracy: true});

    }

</script>
</html>