当前位置：首页 > news >正文

漏刻有时百度地图API实战开发(12)(切片工具的使用、添加自定义图层TileLayer)

news 2025/7/10 18:31:47

在这里插入图片描述

TileLayer向地图中添加自定义图层

    var tileLayer = new BMap.TileLayer();tileLayer.getTilesUrl = function (tileCoord, zoom) {var x = tileCoord.x;var y = tileCoord.y;return 'images/tiles/' + zoom + '/tile-' + x + '_' + y + '.png';}var lockMap = new BMap.MapType('lock_map', tileLayer, {minZoom: 11, maxZoom: 17});var map = new BMap.Map('lock_map', {mapType: lockMap});map.centerAndZoom(new BMap.Point(121.554542541504, 29.813684463501), 13);map.enableScrollWheelZoom();//添加缩放控件var ctrlNav = new window.BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrlNav);//加载标注getMarker(markerArr, 0);

PC端限制显示范围

引入AreaRestriction_min.js库

    <script type="text/javascript" src="//api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

设置可视视野范围

   //设置可视视野范围var b = new BMap.Bounds(new BMap.Point(121.2790142755745, 29.675582699353967),new BMap.Point(121.83093318072264, 29.945334949391032));try {BMapLib.AreaRestriction.setBounds(map, b); // 以map为中心，已b为范围的地图} catch (e) {alert(e);}

移动端限制显示范围

  //设置可视视野范围var b = new BMap.Bounds(new BMap.Point(121.27872681781139, 29.67671237469328),new BMap.Point(121.83035826519644, 29.948214015429013)); // 范围 左下角，右上角的点位置map.addEventListener("dragend", function (type, target) {//console.log(b.containsBounds(map.getBounds()));if (b.containsBounds(map.getBounds())) {//map.panTo(new BMap.Point(114.18882611986866, 36.475437590543926), 4);} else {map.panTo(pointCenter, 13);}});

自适应PC端和移动端

//设置可视视野范围var b = new BMap.Bounds(new BMap.Point(121.2790142755745, 29.675582699353967),new BMap.Point(121.83093318072264, 29.945334949391032));var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);// alert(isMobile);if (isMobile) {//手机端map.addEventListener("dragend", function (type, target) {//console.log(b.containsBounds(map.getBounds()));if (b.containsBounds(map.getBounds())) {//map.panTo(new BMap.Point(114.18882611986866, 36.475437590543926), 4);} else {map.panTo(pointCenter, 13);}});} else {//PC端try {BMapLib.AreaRestriction.setBounds(map, b); // 以map为中心，已b为范围的地图} catch (e) {alert(e);}}