百度地图自定义地图类型瓦片底图-蒲公英云

百度地图自定义地图类型瓦片底图

在这里插入图片描述

示例源码(只显示自定义底图，不显示百度地图底图)

提示：请使用自己申请的《百度地图key》替换代码中的《此处使用你自己的key》

<!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.map.baidu.com/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>