导航位置：首页 > 技术开发 > 前端技术开发

百度地图API定位经纬度方便调式和查看经纬度信息

豆腐果2025-09-23围观：点赞：

偶尔有项目需要用到定位，尤其是获取到用户的经纬度信息，这时候可以用百度地图API实现，以下是实现效果，备份一个代码方便以后使用。

百度地图

具体代码如下：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度地图定位</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=mybaidukey"></script>
    <style>
        body {
            font-family: 'PingFang SC', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f0f2f5;
        }
        .control-panel {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
		.control-panel h1{ text-align: center;}
        button {
            background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            margin: 8px 0;
            transition: all 0.3s;
        }
        button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        .info-display {
            background: #f8f9fa;
            padding: 16px;
            border-radius: 8px;
            margin: 12px 0;
            line-height: 1.6;
        }
        #map-container {
            height: 400px;
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .coordinate-item {
            display: flex;
            justify-content: space-between;
            margin: 8px 0;
        }
    </style>
</head>
<body>
    <div class="control-panel">
        <h1>百度地图定位</h1>
        <button id="getLocationBtn">获取当前位置</button>
        <div class="info-display">
            <h3>位置信息</h3>
            <div class="coordinate-item">
                <span>纬度：</span>
                <span id="latitude">未获取</span>
            </div>
            <div class="coordinate-item">
                <span>经度：</span>
                <span id="longitude">未获取</span>
            </div>
            <div class="coordinate-item">
                <span>地址：</span>
                <span id="address">未获取</span>
            </div>
        </div>
    </div>
    <div id="map-container"></div>

    <script>
        // 初始化地图
        const map = new BMap.Map("map-container");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
        map.enableScrollWheelZoom();
        map.enableDragging();
        
        let currentMarker = null;
        let geoc = new BMap.Geocoder();

        // 获取当前位置按钮事件
        document.getElementById('getLocationBtn').addEventListener('click', () => {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const lat = position.coords.latitude;
                        const lng = position.coords.longitude;
                        updatePositionInfo(lng, lat);
                        addMarkerToMap(lng, lat);
                    },
                    (error) => {
                        alert(`获取位置失败: ${error.message}`);
                    },
                    { enableHighAccuracy: true, timeout: 5000 }
                );
            } else {
                alert("您的浏览器不支持地理定位功能");
            }
        });

        // 地图点击事件
        map.addEventListener("click", (e) => {
            updatePositionInfo(e.point.lng, e.point.lat);
            addMarkerToMap(e.point.lng, e.point.lat);
        });

        // 更新位置信息显示
        function updatePositionInfo(lng, lat) {
            document.getElementById('latitude').textContent = lat.toFixed(6);
            document.getElementById('longitude').textContent = lng.toFixed(6);
            
            // 反向地理编码获取地址
            geoc.getLocation(new BMap.Point(lng, lat), (rs) => {
                const addComp = rs.addressComponents;
                const address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;
                document.getElementById('address').textContent = address;
            });
        }

        // 添加标记到地图
        function addMarkerToMap(lng, lat) {
            if (currentMarker) {
                map.removeOverlay(currentMarker);
            }
            const point = new BMap.Point(lng, lat);
            currentMarker = new BMap.Marker(point);
            map.addOverlay(currentMarker);
            map.panTo(point);
        }
    </script>
</body>
</html>

点赞评论