Leaflet 加载高德地图卫星图教程 - 完整代码示例

"要加载高德地图卫星图，可以使用 leaflet 和高德地图的 API。\n\n首先，引入 leaflet 和高德地图的 API 库：\n\nhtml\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />\n<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>\n\n\n然后，在 HTML 页面中创建一个容器，用于显示地图：\n\nhtml\n<div id="map" style="width: 100%; height: 400px;"></div>\n\n\n接下来，使用 JavaScript 代码初始化地图，并加载高德地图卫星图层：\n\njavascript\n// 初始化地图\nvar map = L.map('map').setView([39.9, 116.4], 10);\n\n// 添加高德地图卫星图层\nL.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {\n maxZoom: 18,\n attribution: '高德地图卫星图'\n}).addTo(map);\n\n\n在上面的代码中，L.map('map') 用于创建地图实例，并将其显示在 id 为 "map" 的容器中。setView 方法用于设置地图的中心点坐标和缩放级别。\n\nL.tileLayer 用于加载高德地图卫星图层。其中的 URL 参数 style=6 表示加载卫星图层，{x}、{y} 和 z 分别表示瓦片的行号、列号和缩放级别。\n\n最后，使用 CSS 样式指定地图容器的宽度和高度，以及其他样式。\n\n这样，就可以加载高德地图卫星图层到 leaflet 地图中了。\n"