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

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

提示：请使用自己申请的《百度地图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>

百度地图自定义地图类型瓦片底图相关推荐

百度地图自定义背景图瓦片图制作流程
百度地图瓦片图制作流程 1.下载BaiduMapTileCutter.exe 链接: https://pan.baidu.com/s/1uxgiz8j9keQd19qz2byT5Q 提取码: cwva ...
Web端调用高德地图-自定义地图-只显示中国区域
1. 通过以下链接注册账号密码高德开放平台 | 高德地图API高德开放平台官网https://lbs.amap.com/?ref=https%3A%2F%2Fgeohub.amap.com%2Fmap ...
高德地图自定义地图样式失效
记录一下自定义地图失效的问题~~ 正常引用: index:html: <script src="https://webapi.amap.com/maps?v=1.4.4&key ...
android 百度地图自定义地图标注,百度地图自定义标注
步骤:① 定义构造函数并继承Overlay,通过构造函数参数可以传递一些自由的变量.设置自定义覆盖物对象的prototype属性为Overlay的实例,以便继承覆盖物基类. functionCompl ...
android高德地图自定义地图,(android地图开发) 高德地图自定义对话框
截图效果: 布局文件: android:layout_width="fill_parent" android:layout_height="fill_parent&quo ...
Android高德地图自定义地图指南针
高德地图的指南针默认位置在地图的左上角,并且位置不可以修改.我们可以自定义一个指南针. 效果如下图 1.在布局文件定义一个ImageView <ImageView android:id=&quo ...
android高德地图自定义地图,Android实现高德地图自定义样式
放置Android工程下的assets文件夹,在assets文件夹里面创建了一个styleMap子文件夹.将里面的文件写到sd卡中. 写出文件代码: try { // 先获取系统默认的文档存放根目录 ...
高德地图自定义地图怎么去除最上边这个默认的蓝色天空？太丑了！！
Android之高德地图自定义样式
安卓集成地图是常见需求,很多时候都需要进行地图样式进行设置,官方提供了一些可选择的样式,可以进行设置. 最新的配置样式方法请参考: 高德官方文档中:开发 > Android 地图SDK > ...

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

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

百度地图自定义地图类型瓦片底图相关推荐

最新文章

热门文章