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

23             .my-div-icon {

24                 width: 50px;

25                 height: 50px;

26                 background-color: #27BA98;

27             }

28         </style>

29     </head>

30     <body>

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

32

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

34

35         <script type="text/javascript">

36             const {

37                 dir

38             } = console;

39             const mymapOptions = {

40                 // 地图中心

41                 center: [50.5, 30.5],

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

43                 minZoom: 12,

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

45                 zoom: 13,

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

47                 maxZoom: 14,

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

49                 zoomSnap: 1,

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

51                 attributionControl: false,

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

53                 zoomControl: true,

54             }

55

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

57

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

59             const imageBounds = [

60                 [50.52728768645296, 30.62301635742188],

61                 [50.472692651662115, 30.376853942871097]

62             ];

63

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

65

66             const divIcon = L.divIcon({

67                 className: 'my-div-icon',

68                 // 自定义HTML代码，放在div元素内，默认为空。或者，一个 HTMLElement的实例。

69                 html: '3dddddddd',

70                 // 可选的背景的相对位置，单位是像素

71                 // 搞不清楚用途,没有效果

72                 bgPos: [90, 0]

73             });

74

75             L.marker([50.5, 30.5], {

76                 icon: divIcon

77             }).addTo(mymap);

78         </script>

79

80     </body>

81 </html>

文字icon的更多相关文章

  1. SDL显示文字

    前面教程里,我们只显示图片,没提到如何显示文字, SDL本身没有显示文字功能,它需要用扩展库SDL_ttf来显示文字.ttf是True Type Font的缩写,ttf是Windows下的缺省字体,它 ...

  2. iconfont的蜕化操作

    很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网 ...

  3. AppCan学习笔记--数据存储及listview简单应用

    AppCan AppCan开发平台简介 AppCan是Hybrid App开发框架即混合开发框架,有官方提供底层功能使用API HTML5和JavaScript只是作为一种解析语言,真正调用的都是Na ...

  4. winform窗体（二）——控件

    一.窗体的事件 每一个窗体都有一个事件,这个窗体加载完成之后执行哪一段代码 位置:1)右键属性→事件→load 双击进入 2)双击窗体任意一个位置进入 删除事件:先将事件页面里面的挂好的事件删除,再删 ...

  5. winform窗体控件（全）

    回顾跟补充下除了昨天那常用6个其他的winform窗体控件作用 1:Button:按钮 (1)AutoSize:如果是True的情况下,内容将会撑开:False的话会另起一行 (2)Enabled: ...

  6. WindowsForm公共控件--2016年12月5日

    Button text:修改按钮显示的文字 CheckBox Checked:是否选中 CheckedListBox checkedListBox.Items.Add(显示的值,初始选中状态); ch ...

  7. Winform 控件

    ※控件在视图工具箱里面找,找到之后双击即可添加进来,也可以点住拖进来 ※每个工具,控件,窗体都有一个name,相当于id,用来标识该对象的名称,name值不允许重复 控件: 1.Label -- 文本 ...

  8. WinForm 控件（下）

    10.PictureBox 外观,Image可以选择图片路径行为,SizeMode可以设置图片大小布局方式 11.Imagelist--图片集 imageList1.Images[n]; 12.not ...

  9. mint-ui —— navbar和tab-container的区别

    navbar的具体实现 <template> <div class="page-navbar"> <div class="page-titl ...

  10. web项目中js加载慢问题解决思路

    最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: < ...

随机推荐

  1. 基于jQuery的三种AJAX请求

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

  2. drf快速使用 CBV源码分析 drf之APIView分析 drf之Request对象分析

    目录 序列化和反序列化 drf介绍和安装 使用原生django写接口 django DRF安装 drf快速使用 模型 序列化类 视图 路由 datagrip 使用postman测试接口 CBV源码分析 ...

  3. vivo 实时计算平台建设实践

    作者:vivo 互联网实时计算团队- Chen Tao 本文根据"2022 vivo开发者大会"现场演讲内容整理而成. vivo 实时计算平台是 vivo 实时团队基于 Apach ...

  4. Linux 驱动像单片机一样读取一帧dmx512串口数据

    硬件全志R528 目标:实现Linux 读取一帧dmx512串口数据. 问题分析:因为串口数据量太大,帧与帧之间的间隔太小.通过Linux自带的读取函数方法无法获取到 帧头和帧尾,读取到的数据都是缓存 ...

  5. MySQL 判断语句 条件函数 case when、if、ifnull

    在MySQL中,需要用到条件判断函数,例如 case when.if.ifnull. 一.方法分类 二.具体方法 (1)if if(expr,result_true,result_false) 注意: ...

  6. Python语法与基本数据类型

    Python语法与基本数据类型 一.Python语法之注释 1.注释 注释就是对一段代码的解释说明 2.注释的写法 1.单行注释:解释说明的文字前面加#号, pycharm中有快捷键 ctrl+? 2 ...

  7. Spring Security Form表单认证代码实例

    Spring Security Form表单认证 Spring Security中,常见的认证方式可以分为HTTP层面和表单层面,如下: HTTP基本认证 Form表单认证 HTTP摘要认证 Spri ...

  8. Flutter入门资料推荐

    前言 群里很多入门小白不知道如何入门 Flutter,水一篇文章简单介绍下本人学习过程中一些参考资料,方便 Flutter 小白少走弯路. 非权威,推荐只针对本人经验来的说,大佬们不喜勿喷! 资料列表 ...

  9. 【Android 4.4】内存文件系统（tmpfs）的创建与使用

    前言说明 某些情况下,需要缓存一些文件到磁盘中,我们可以借助 tmpfs 文件系统,来提升读写缓存文件的速度,并且也可以避免频繁读写缓存文件所带来的对 flash 的寿命影响. 使用方法 通过 mkd ...

  10. 快速上手python的简单web框架flask

    目录 简介 web框架的重要组成部分 快速上手flask flask的第一个应用 flask中的路由 不同的http方法 静态文件 使用模板 总结 简介 python可以做很多事情,虽然它的强项在于进 ...