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、成品效果

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
ll7788114 小时前
LeetCode每日精进:20.有效的括号
c语言·开发语言·算法·leetcode·职场和发展
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui