<!DOCTYPE html><html><head><meta charset="utf-8" /><title>自定义地图类型瓦片</title><style>html,body {height: 100%;margin: 0;}.zoom {position: absolute;right: 20px;top: 10px;z-index: 10;padding: 2px 10px;background-color: #fff;border-radius: 2px;font-size: 14px;box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px;}</style></head><body><div class="zoom">缩放层级：<strong class="zoom-num">1</strong></div><div id="map" style="width: 100%; height: 100%;"></div><script src="https://api./api?v=3.0&ak=此处使用你自己的key"></script><script>const tileLayer = new BMap.TileLayer();tileLayer.getTilesUrl = function (tileCoord, zoom) {const x = tileCoord.x;const y = tileCoord.y;return 'tiles/' + zoom + '/tile-' + x + '_' + y + '.png';};const mapType = new BMap.MapType('自定义地图', tileLayer, {minZoom: 10, maxZoom: 25 });const map = new BMap.Map('map', {mapType: mapType });map.centerAndZoom(new BMap.Point(116.404, 39.915), 21);map.enableScrollWheelZoom(true);setMapZoomText();map.addEventListener('zoomend', setMapZoomText);//设置缩放级别文字function setMapZoomText() {const zoom = map.getZoom();document.querySelector('.zoom-num').innerText = zoom;}</script></body></html>
