web端使用高德地图逆地理编码
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>
记得两处把你得key换了ok了
5、成品效果
原文地址：https://blog.csdn.net/apple_70049717/article/details/142827008
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！