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

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

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

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);}}

@漏刻有时

http://www.lryc.cn/news/261102.html

相关文章:

  • python 爬虫 m3u8 视频文件 加密解密 整合mp4
  • mybatis中xml文件容易搞混的属性
  • android Retrofit2.0请求 延长超时操作
  • Axure之动态面板轮播图
  • 一文读懂算法中的时间复杂度和空间复杂度,O(1)、O(logn)、O(n)、O(n^2)、O(2^n) 附举例说明,常见的时间复杂度,空间复杂度
  • LWIP热插拔功能实现
  • android下的app性能测试应主要针对那些方面,如何开展?
  • 【深度学习】注意力机制(二)
  • 学习黑马vue
  • gdb本地调试版本移植至ARM-Linux系统
  • 《Linux C编程实战》笔记:实现自己的ls命令
  • Python个人代码随笔(观看无益,请跳过)
  • Unity中实现ShaderToy卡通火(总结篇)
  • 等保2.0的变化
  • 漏洞复现-网神SecGate3600防火墙敏感信息泄露漏洞(附漏洞检测脚本)
  • ArkTS入门
  • JS中for循环之退出循环
  • 《Global illumination with radiance regression functions》
  • 华南理工C++试卷
  • 0001.WIN7(64位)安装ADS1.2出现L6218错误
  • HBuilderX 配置 夜神模拟器 详细图文教程
  • 10、神秘的“位移主题”
  • 【Linux】dump命令使用
  • 使用 TensorFlow 创建生产级机器学习模型(基于数据流编程的符号数学系统)——学习笔记
  • vue实现悬浮窗拖动的自定义指令
  • gitee(ssh)同步本地
  • Redis新数据类型-Bitmaps
  • web前端之vue组件传参、各种传参的不同写法、语法糖
  • 基于Nexus搭建Maven私服基础入门
  • JavaScript自执行函数:用途、好处