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