漏刻有时百度地图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.mzph.cn/news/226032.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】MySQL 在 Centos 7环境安装教程

文章目录 1.卸载不要的环境2.检查系统安装包3.获取mysql官方yum源4.安装mysql yum 源&#xff0c;对比前后yum源5.安装mysql服务6.查看配置文件和数据存储位置7.启动服务和查看启动服务8.登录9.配置my.cnf 1.卸载不要的环境 先检查是否有mariadb存在 ps ajx |grep mariadb如果…

【StarRocks-1.简介】

一、简介: starRocks起源于开源软件Doris,其相对Doris的社区环境&#xff0c;starRcoks有商业团队维护、快速版本迭代和dockerHub高支持,让我在生产环境中更加偏向于starRocks&#xff0c;而不是拥抱Doris开源社区。StarRocks的版本更新速度、学习文档和论坛都让小白更加容易入…

Spring+Mybatis如何处理大批量sql(for循环+批处理法)

如果只是单纯地将Mapper语句放在循环中&#xff0c;那么会为每次的循环都创建一个事务&#xff0c;导致大批量的sql耗时会很长。 如果我们让在同一个循环中的Mapper语句在一个事务中提交&#xff0c;批处理这些sql&#xff0c;不多次创建事务&#xff0c;那么我们就能极大地改…

js 获取当前href

在JavaScript中&#xff0c;你可以通过window.location.href来获取当前页面的URL。下面是一个简单的例子&#xff1a; var currentURL window.location.href; console.log(currentURL);上述代码获取当前页面的完整URL&#xff0c;并将其存储在currentURL变量中。然后&#xf…

C语言定长数组 变长数组 柔性数组

C语言定长数组 变长数组 柔性数组 文章目录 C语言定长数组 变长数组 柔性数组1. 定长数组2. 变长数组3. 柔性数组3.1 结构体的大小3.2 柔性数组的使用 1. 定长数组 在C99标准之前&#xff0c;C语言在创建数组的时候&#xff0c;数组的大小只能使用常量&#xff0c;常量表达式来…

【EI会议征稿】第三届电子信息工程、大数据与计算机技术国际学术会议(EIBDCT 2024)

第三届电子信息工程、大数据与计算机技术国际学术会议&#xff08;EIBDCT 2024&#xff09; 2024 3rd International Conference on Electronic Information Engineering, Big Data and Computer Technology 第三届电子信息工程、大数据与计算机技术国际学术会议&#xff08;…

小狐狸GPT付费2.4.9弹窗版学习源码介绍

小狐狸GPT付费2.4.9弹窗版学习源码是一套基于GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型的开源代码库&#xff0c;旨在帮助开发者快速构建和训练自己的语言模型。该源码集成了多个先进的自然语言处理技术&#xff0c;包括预训练、微调、对话生成等&am…

云服务领取证书,注册域名,实现nginx服务配置证书

目录 1.登录网址腾讯云 2.腾讯云注册域名 3.实名认证&#xff0c;上传信息 4.域名注册 5.领取证书 6.域名与证书绑定 7.下载证书 8.设置环境 9.域名解析 10. 本地域名解析 11.上传证书到目录 12.nginx配置文件做地址重写到证书域名 13.配置证书conf 14.设置index…

磁盘坏道修复工具-是一款非常方便实用的磁盘坏道修复软件-供大家学习研究参考

1、支持磁盘数据擦除。 2、杜绝因硬盘坏道&#xff0c;而产生个人隐私数据泄露的问题。 3、支持对该磁盘格式化。 下载&#xff1a;https://download.csdn.net/download/weixin_43097956/88625682

JavaScript自执行函数:用途、好处

JavaScript中的自执行函数是一个常见的编程技巧&#xff0c;它可以在特定的场景中发挥重要作用。本文将介绍自执行函数的用途、好处&#xff0c;并提供代码示例进行说明。 引言 在JavaScript编程中&#xff0c;自执行函数是一种特殊的函数调用方式&#xff0c;它能够在定义后…

Python中的列表推导式

使用列表推导式可以快速生成一个列表&#xff0c;或者根据某个列表生成满足指定需求的列表。列表推导式通常有以下几种常用的语法格式&#xff1a; &#xff08;1&#xff09;生成指定范围的数值列表&#xff0c;语法格式如下&#xff1a; list[Expression for var in range] …

【贪心】LeetCode-406. 根据身高重建队列

406. 根据身高重建队列。 假设有打乱顺序的一群人站成一个队列&#xff0c;数组 people 表示队列中一些人的属性&#xff08;不一定按顺序&#xff09;。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi &#xff0c;前面 正好 有 ki 个身高大于或等于 hi 的人。 请你重新…

关于“Python”的核心知识点整理大全22

目录 ​编辑 9.4.2 在一个模块中存储多个类 虽然同一个模块中的类之间应存在某种相关性&#xff0c;但可根据需要在一个模块中存储任意数量的 类。类Battery和ElectricCar都可帮助模拟汽车&#xff0c;因此下面将它们都加入模块car.py中&#xff1a; car.py my_electric_car…

焦虑,其实是你自愿选择的

如果一个人想要焦虑&#xff0c;他可以永远焦虑下去 从上学&#xff0c;到找工作&#xff0c;从买房到结婚生娃&#xff0c;他总是可以选择用自己的头脑去过度思考未来还没有发生的事情&#xff0c;从而让自己无限焦虑下去&#xff0c;直到生命终结。 我们的生命是存在于当下…

技术点:实现大文件上传

大文件上传 实现思路 对于大文件上传考虑到上传时间太久、超出浏览器响应时间、提高上传效率、优化上传用户体验等问题进行了深入探讨&#xff0c;以下初略罗列各个知识点的实现思路&#xff1a; 大文件上传对文件本身进行了文件流内容 Blob 的分割&#xff0c;使用 Blob.pr…

基于 Gin 的 HTTP 代理上网行为记录 demo

前言: 前端时间写了好几篇使用 Gin 框架来做 HTTP 代理 demo 的文章&#xff0c;然后就想着做一个记录上网行为的小工具&#xff0c;就是简单记录看看平时访问了什么网站&#xff08;基于隧道代理的&#xff0c;不是中间人代理&#xff0c;所以只能记录去了哪里&#xff0c;不能…

wps左上角有绿色小三角的数字如何求和

1.这个状态是求和不了的&#xff0c;使用求和公式求出来的也是0 2.进行如下操作 3.转换好后 则可以求和成功了

使用JavaScript转换图片格式

我们可以在现代浏览器中直接转换图片和格式&#xff0c;不需要上传服务器或者使用服务器脚本。 HTML <!-- 文件上传控件 --> <input type"file" id"fileInput" accept"image/*" /><!-- 输出格式选择 --> <select id"…

sns 查看pandas 数据对比

一 对比其中两列数据的方式 import seaborn as snssns.kdeplot(data[charge], shade True, hue data[sex]) sns.kdeplot 是 Seaborn 库中用于绘制核密度估计图&#xff08;Kernel Density Estimate&#xff0c;简称 KDE 图&#xff09;的函数。核密度估计是一种非参数统计方…

redis基本用法学习(主要数据类型)

redis官网教程中介绍有三种方式连接redis&#xff1a;命令行、gui工具和编程连接&#xff1a;   命令行方式主要是在命令行中输入redis-cli后&#xff0c;通过命令方式与redis服务进行交互&#xff0c;支持两种模式&#xff1a;REPL模式&#xff08;简单的交互式的编程环境&a…