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             #mapid {

15                 height: 500px;

16             }

17         </style>

18     </head>

19     <body>

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

21

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

23

24         <script type="text/javascript">

25             const mymapOptions = {

26                 // 地图中心

27                 center: [51.505, -0.09],

28                 // 地图的最小缩放级别

29                 minZoom: 11,

30                 // 初始化时的缩放等级

31                 zoom: 13,

32                 // 地图的最大缩放级别

33                 maxZoom: 15,

34                 // 强制让地图的缩放级别始终为这个值的倍数

35                 zoomSnap: 1,

36                 // 版权控件添加到地图中（即水印）

37                 attributionControl: false,

38                 // 是否显示zoom 缩放控件,默认是true

39                 zoomControl: true,

40             }

41

42             const mymap = L.map('mapid', mymapOptions);

43

44             //声明图层组，存储城市标记marker

45             var cities = L.layerGroup();

46

47             //声明两个城市marker并添加进图层组

48             var linyi = L.marker([51.505, -0.09]).bindPopup('这里属于青岛').addTo(cities);

49             var qingdao = L.marker([51.505, -0.19]).bindPopup('这里属于临沂').addTo(cities);

50

51             cities.addTo(mymap)

52

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

54             // 获取顶部左边的边界

55             const northEast = L.latLng(mymap.getBounds()._northEast);

56             // 获取底部右边的边界

57             const southWest = L.latLng(mymap.getBounds()._southWest);

58

59             const imageBounds = L.latLngBounds(northEast, southWest);

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

61         </script>

62

63     </body>

64 </html>

marker的存储组---layerGroup的更多相关文章

  1. linux用户及组管理

    useradd      添加用户 passwd       修改用户密码 userdel       删除用户,默认不删除用户主目录和email,如果想删除可加 –r 参数 groupadd   添 ...

  2. AppBoxFuture(五): 分布式文件存储-Store Everything

      本来本篇是想介绍前端组件化开发用户界面,发现框架还未实现文件存储,原本计划是后续设计开发的,索性把计划提前,所以本篇将介绍基于Raft实现分布式的文件存储引擎. 一. 实现思路   既然是分布式存 ...

  3. Linux系统用户与属组管理(3)

    好了,终于要到了管理 Linux 账号的时刻了,对于 Linux 有一定的熟悉度之后,再来就是要管理连上 Linux 的账号问题了,这个账号的问题可大可小,大到可以限制他使用 Linux 主机的各项资 ...

  4. FastDFS 双tracker负载均衡 及多组存储配置

    应用场景: 三台服务器分别做三组存储,并且需要两台tracker地址做主备关系,当一台down机后需要另外一台可以提供正常的访问连接 #注:此处不考虑存储数据安全性,如果需要保障数据不丢失,可以分别每 ...

  5. (转)AIX 用户和组管理

    AIX 用户和组管理 原文:https://www.ibm.com/developerworks/cn/aix/library/au-aixuseradmin/ 管理 IBM AIX 中的用户和组是管 ...

  6. 关于VMAX中存储资源池（SRP）

    Storage Resource Pool中的相关元素 SRP由一个或多个数据池组成,这些数据池包含了预配置的数据(或TDAT)设备,可为创建和呈现给主机与应用程序的精简设备(TDEVS) 提供存储. ...

  7. FastDFS安装（mac）｜文件存储方案

    目录 FastDFS安装(mac)|文件存储方案 1 FastDFS介绍 1.1 FastDFS架构 1.2 工作原理实例介绍 1.3 FastDFS上传和下载流程 1.4 FastDFS文件索引 2 ...

  8. QingStor 对象存储架构设计及最佳实践

    对象存储概念及特性 在介绍 QingStor️对象存储内部的的架构和设计原理之前,我们首先来了解一下对象存储的概念,也就是从外部视角看,对象存储有什么特性,我们应该如何使用. 对象存储本质上是一款存储 ...

  9. 利用高级组策略管理AGPM复制组策略GPO

    有时候管理多个林,在一个林中配置了GPO之后,想复制出来用到其它林里.默认系统的组策略管理里没有这个功能.但是微软在微软企业桌面优化套件Microsoft Desktop Optimization P ...

  10. FASTDFS调研报告(V1.0)

    之前的文章,现在放出来,以供参阅. 一.fastdfs简介 FastDFS是一个轻量级的开源分布式文件系统 FastDFS主要解决了大容量的文件存储和高并发访问的问题,文件存取时实现了负载均衡 Fas ...

随机推荐

  1. 利用WordPress搭建属于自己的网站

    怎么用WordPress给自己搭建了一个网站?可能很多人都想拥有属于自己的网站,这篇文章就找你怎么利用WordPress搭建属于自己的网站.如果你也正好有搭建个人网站的想法,那么本文会给你一个参考,我 ...

  2. 基于jQuery的三种AJAX请求

    基于jQuery的三种AJAX请求 1. 介绍 get请求 通常用于 获取服务端资源(向服务器要资源) ​ 例如:根据URL地址,从服务器获取HTML文件.CSS文件.JS文件.图片文件.数据资源等. ...

  3. CLISP学习(一)

    Lisp Lisp发表于1960,是由数学家约翰·麦卡锡发明的. 在计算机有所发展时,数学家们对人工智能有着极大的兴趣,觉得可以实现一个共通的方法,使计算机能够处理链表中的符号数据,允许语言的处理.信 ...

  4. dispatch_source_t定时器

    定时器简述 在iOS中,计时器是比较常用的,用于统计累加数据或者倒计时等,计时器大概有那么三种,分别是: NSTimer CADisplayLink dispatch_source_t 比较 1.NS ...

  5. 疯狂吐槽 MAUI 以及 MAUI 入坑知识点

    目录 窗口 窗口管理 如何限制一次只能打开一个程序 MAUI 程序安装模式 为 MAUI Blazor 设置语言 坑 ① 坑 ② 坑 ③ 配置 MAUI 项目使用管理员权限启动 问题背景 定制编译过程 ...

  6. DVWA系列2：SQL Injection

    DVWA系列2:SQL Injection 前言 SQL 注入是比较常见的攻击类型,之前一直听说过,也尝试看过一些教程,但其中的单引号,字符串拼接等感觉有点抽象,不知道为什么要这么做.这次就使用 DV ...

  7. vue中wowjs的使用

    笔者亲测,在vue中使用wow.js如果不按照以下方法实施,会出现意想不到的BUG,网页刷新后图片就全部突然看不到了,被增加了一个隐藏属性,建议大家严格按照方法执行,不要随意使用 (1)通过npm安装 ...

  8. RealWorld CTF 5th ShellFind 分析

    前言 RealWorld CTF 5th 里的一道iot-pwn,根据真实设备固件改编而成,觉得题目贴近iot实战且很有意思,故在此记录一下复现过程. 题目分析 题目描述 Hello Hacker. ...

  9. 构建api gateway之 http路由实现

    http路由 路由是指路由器从一个接口上收到数据包,根据数据包的目的地址进行定向并转发到另一个接口的过程. 而这里的http路由其实等同于web开发中,根据http相关参数(比如url.http me ...

  10. 行为型模式 - 解释器模式Interpreter

    学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 模式的定义与特点 解释器模式(Interperter Pattern),给定一个语言,定义它的文法表示,并定义一个解释器,这个解 ...