百度地图自定义地图类型瓦片底图
程序员文章站
2022-04-25 09:53:19
...
提示：请使用自己申请的《百度地图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>
上一篇： 光驱“延年益寿”超级良方
下一篇： 购物车功能【CI实现】