web端使用高德地图逆地理编码

技术需要沉淀gogo

于 2024-10-10 17:22:06 发布

阅读量165

点赞数 7

分类专栏：高德地图定位文章标签：前端开发语言 javascript

本文链接：https://blog.csdn.net/apple_70049717/article/details/142827008

版权

高德地图定位专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、首先去地理/逆地理编码-基础 API 文档-开发指南-Web服务 API | 高德地图API注册一下

2、点击产品介绍-------地理/逆地理编码

3、创建应用拿到key

创建web服务、看底下有逆地理编码服务

4、上一步就能拿到key了最后一步复制底下代码即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德逆地理编码示例</title>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script> 
    <style>
        /* 设置地图容器的大小 */
        #map {
            width: 100%;
            height: 800px;
        }
    </style>
</head>
<body>
    <h1>通过经纬度查找位置</h1>
    <label for="longitude">经度:</label>
    <input type="text" id="longitude" placeholder="请输入经度">
    <label for="latitude">纬度:</label>
    <input type="text" id="latitude" placeholder="请输入纬度">
    <button id="getAddress">查找位置</button>
    <div id="output"></div>
    <div id="map"></div>

    <script>
        // 初始化地图
        const map = new AMap.Map('map', {
            zoom: 10, // 设置地图缩放级别
            center: [108.999, 34.2449] // 设置地图中心点，
        });

        document.getElementById('getAddress').addEventListener('click', function() {
            const longitude = document.getElementById('longitude').value;
            const latitude = document.getElementById('latitude').value;

            if (!longitude || !latitude) {
                document.getElementById('output').innerText = '请输入有效的经纬度。';
                return;
            }

            // 构建 API 请求 URL
            const key = ''; // 替换为你的高德API密钥
            const location = `${longitude},${latitude}`;
            const apiUrl = `https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${location}&extensions=all&output=JSON&radius=10`;

            // 发送 API 请求
            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    console.log(data); // 打印返回的数据用于调试
                    if (data.status === '1' && data.regeocode) {
                        const address = data.regeocode.formatted_address; // 获取地址
                        document.getElementById('output').innerText = `具体位置: ${address}`;
                        
                        // 在地图上标记该位置
                        const lngLat = new AMap.LngLat(longitude, latitude);
                        const marker = new AMap.Marker({
                            position: lngLat,
                            title: address // 标记的标题
                        });
                        marker.setMap(map);
                        map.setCenter(lngLat); // 将地图中心移动到标记位置
                        map.setZoom(15); // 缩放级别
                    } else {
                        document.getElementById('output').innerText = '获取具体位置失败。错误信息: ' + data.info;
                    }
                })
                .catch(error => {
                    console.error('错误:', error);
                    document.getElementById('output').innerText = '请求出错，请重试。';
                });
        });
    </script>
</body>
</html>