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

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

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

3、创建应用拿到key

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

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

javascript 复制代码
<!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>

记得两处把你得key换了ok了

5、成品效果

相关推荐
鸥梨菌Honevid几秒前
Qt自定义控件(1)——QPaintEvent
开发语言·qt
Code季风3 分钟前
深入比较 Gin 与 Beego:Go Web 框架的两大选择
开发语言·golang·go·gin·beego
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年1 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W6 小时前
微信小程序实现路由拦截的方法
前端