1 <!DOCTYPE html>

 2 <html lang="zh">

 3     <head>

 4         <meta charset="UTF-8">

 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">

 6         <meta http-equiv="X-UA-Compatible" content="ie=edge">

 7         <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />

 8         <title></title>

 9         <style type="text/css">

10             body {

11                 margin: 0;

12             }

13

14             html,

15             body {

16                 height: 100%;

17             }

18

19             #mapid {

20                 height: 500px;

21             }

22         </style>

23     </head>

24     <body>

25         <div id="mapid"></div>

26

27         <script type="text/javascript" src="leaflet/leaflet.js"></script>

28

29         <script type="text/javascript">

30             const {

31                 dir

32             } = console;

33

34

35             const mymap = L.map('mapid');

36

37             const imageUrl = './leaflet/images/b1-floor1-full-h.png';

38             const imageBounds = [

39                 [50.52728768645296, 30.62301635742188],

40                 [50.472692651662115, 30.376853942871097]

41             ];

42

43             const imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mymap);

44

45             // 用了这个你就不用在设置zoom, minZoom, maxZoom, cenger

46             // 将地图的视图设置在给定的矩形地理范围内,地图会自动计算最大缩放级别和中心点。

47             mymap.fitBounds(imageBounds)

48         </script>

49

50     </body>

51 </html>

不过不是很智能

8. fitBounds(用了这个你就不用在设置zoom, minZoom, maxZoom, center)的更多相关文章

  1. sqlplus 初始化文件(每一次打开sqlplus不用重新设置 linesize 和 pagesize)

    初始化文件目录  D:\oracle\product\11.2.0\dbhome_1\sqlplus\admin\glogin.sql 用记事本打开,添加 --SET linesize 150SET ...

  2. ie6、ie7真的不支持inline-block吗？

    本来今天想出JavaScript继承的博文的,由于也才刚学习不久,以及工作比较忙,所以暂推两天写JavaScript的继承,喜欢的童鞋们关注我的博客哟! okay,言归正传.之前在接触前端的时候,处理 ...

  3. 有了这个，再也不用每次连新机器都要设置secure crt属性了

    我连服务器用的是secure crt,每次ssh新服务器的时候都得手动设置字符编码和背景颜色,今天问了旁边的开发原来可以全局设置,以后连服务器的时候就再也不用手动设置相关属性了.步骤如下: 一开始点击 ...

  4. Leaflet：Map类属性及方法

    1.初始化 L.map(<String> id , options ?) //用地图div的id创建 L.map(<HTMLElement>el , options?) //用 ...

  5. iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook系统服务开发汇总

    --系统应用与系统服务 iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用 ...

  6. Android点滴

    1,View中getWidth(),getLayoutParams.width,getMeasureedWidth()的区别 2,setCompoundDrawables和setCompoundDra ...

  7. Apache Hadoop2.x 边安装边入门

    完整PDF版本:<Apache Hadoop2.x边安装边入门> 目录 第一部分:Linux环境安装 第一步.配置Vmware NAT网络 一. Vmware网络模式介绍 二. NAT模式 ...

  8. alienware Win8 系统安装

    原作者网名 alienware-小来: 我的外星人 老是装系统出错.我觉得写的不错.把原作者的东西拿过来.. 对于win7系统的用户来说想要体验下win8.1系统,或者是原来win8.1系统加装固态后 ...

  9. Spring学习记录1--@Transactional Propagation

    起因 学习Spring的时候就知道aop有一个应用是声明式注解..反正往Service上一丢@Transactional就完事了..不用自己去开启hibernate的session,很简单. 但是@T ...

  10. 再谈 Mysql解决中文乱码

    一是要把数据库服务器的字符集设置为 utf8. 数据库的字符集会跟服务器的字符集一起变化, 也会变成 utf8: 在/etc/my.cnf中, 的 [mysqld]中, 设置 character-se ...

随机推荐

  1. 手动解析word Table模块内容

    最近来了一个需求, 需要手动解析word ( 好处就是不需要安装office 以及不会有office解析的线程残留),然后就是可以自定义解析规则,比较方便 比如解析这个word里面的内容: 标题,表格 ...

  2. Android的诞生

    Android操作系统最初由Andy Rubin开发,刚开始主要支持手机,被Google收购后,对Android进行了改良,使其可以用于平板电脑等其它领域. 1.1.1 Android的发展史Andr ...

  3. Redis网络模型究竟有多强

    如果面试官问我:Redis为什么这么快? 我肯定会说:因为Redis是内存数据库!如果不是直接把数据放在内存里,甭管怎么优化数据结构.设计怎样的网络I/O模型,都不可能达到如今这般的执行效率. 但是这 ...

  4. 万字长文详解 YOLOv1-v5 系列模型

    一,YOLOv1 Abstract 1. Introduction 2. Unified Detectron 2.1. Network Design 2.2 Training 2.4. Inferen ...

  5. [seaborn] seaborn学习笔记9-绘图实例(1) Drawing example(1)

    文章目录 9 绘图实例(1) Drawing example(1) 1. Anscombe's quartet(lmplot) 2. Color palette choices(barplot) 3. ...

  6. 面对集中式缓存实现上的挑战，Redis交出的是何种答卷？聊聊Redis在分布式方面的能力设计

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 在本专栏前面的文章中,我们介绍了各种本 ...

  7. webSocket前端+nodejs后端简单案例多人在线聊天

    一:下面是一个简单的案例,回车发送消息,多人在线聊天 1.前端代码 <!DOCTYPE html> <html> <head> <meta charset=& ...

  8. angular打包出现JavaScript堆内存不足、启动也会内存溢出解决办法\increase-memory-limit' 不是内部或外部命令,

    ## 打包出现JavaScript堆内存不足 最近打包遇到这种报错 Ineffective mark-compacts near heap limit Allocation failed - Java ...

  9. BOM操作、DOM操作、jQuery类库

    BOM操作.DOM操作.jQuery类库 一.BOM操作 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行对话 1.window对象 浏 ...

  10. SEO关键词布局方法

    关键词在<title>标签. description属性. keywords属性中是如何布局的. 1.<title>标签中布局关键词 <title>标签是用来定义网 ...