百度地图自定义底图

最新推荐文章于 2023-03-04 07:51:17 发布

summer_du

最新推荐文章于 2023-03-04 07:51:17 发布

阅读量824

点赞数 1

分类专栏：地图文章标签：百度 javascript css

本文链接：https://blog.csdn.net/summer_du/article/details/123124947

版权

地图专栏收录该内容

2 篇文章 3 订阅

订阅专栏

<!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>

summer_du

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
百度地图自定义底图

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>自定义地图类型瓦片</title> <style> html, body { height: 100%; margin: 0;
复制链接

扫一扫