Leaflet 加载高德地图卫星图并显示行政区域名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet 加载高德地图卫星图并显示行政区域名称</title>
<style>
#map {
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_API_KEY"></script>
<script>
// 创建地图实例
var map = L.map('map').setView([39.9, 116.4], 10);
// 使用高德地图卫星图
L.tileLayer('https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
attribution: '高德地图卫星图'
}).addTo(map);
// 获取行政区域边界数据
fetch('https://restapi.amap.com/v3/config/district?keywords=北京市&subdistrict=3&key=YOUR_AMAP_API_KEY')
.then(function(response) {
return response.json();
})
.then(function(data) {
var district = data.districts[0];
var polygon = L.polygon(district.polyline.split(';').map(function(pointStr) {
var point = pointStr.split(',');
return [Number(point[1]), Number(point[0])];
}), {
color: 'red',
fillOpacity: 0.2
}).addTo(map);
// 在多边形中心位置添加行政区域名称标签
var center = polygon.getBounds().getCenter();
L.marker(center).bindTooltip(district.name).addTo(map);
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pLZQ 著作权归作者所有。请勿转载和采集!