Leaflet 加载高德地图 - 详细教程与示例代码
<!DOCTYPE html>
<html>
<head>
<title>Leaflet 加载高德地图 - 详细教程与示例代码</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css">
<style>
#map {
height: 500px;
}
</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.9087, 116.3975], 13);
// 创建高德地图图层
L.tileLayer('https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_API_KEY&tilematrix={z}&tilerow={y}&tilecol={x}', {
maxZoom: 18,
tileSize: 256,
zoomOffset: 1,
subdomains: ['01', '02', '03', '04'],
atTRIBUTION: 'Map data © <a href="https://www.amap.com/">高德地图</a>',
}).addTo(map);
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pLZF 著作权归作者所有。请勿转载和采集!