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. uniapp 微信小程序 实现左侧菜单右侧列表，双向联动的效果

    <template> <view class="u-wrap"> <view class="u-search-box"> & ...

  2. JavaScript：对象：如何读取、添加、删除对象的属性？

    如何给对象添加属性? 直接对象名.属性名去添加属性 直接对象名[属性名]去添加属性,此时属性名得是字符串类型,可以直接引号,也可以用变量名 如何读取对象的属性值? 这个操作,和添加属性是一样的,即用点 ...

  3. [python] 基于matplotlib实现树形图的绘制

    树形图Tree diagram (代码下载) 本文旨在描述如何使用Python实现基本的树形图.要实现这样的树形图,首先需要有一个数值矩阵.每一行代表一个实体(这里是一辆汽车).每列都是描述汽车的变量 ...

  4. MongoDB6.0的安装「2023年」

    你好,我是悦创. 优质原文格式:https://bornforthis.cn/column/crawler/supplement/mongodb-install.html 点进去有惊喜. 吐槽,这篇博 ...

  5. MarkDown语法----纯文本格式的标记语言

    一.基本语法 1.标题 一级标题: "# + 空格 + 标题内容" 二级标题: "## + 空格 + 标题内容" .... 2.字体 粗体: "**+ ...

  6. C 语言初学者必备开发工具——Dev-Cpp [ 图文安装教程 ]

    前言 C 语言是一门功能强大的专业化编程语言,深受专业程序员和业余编程爱好者的喜爱,同时 C 语言也是当今最流行的嵌入式开发语言.大多数嵌入式项目的开发都是用 C 语言来编写的. 既然 C 语言这么厉 ...

  7. angular+ZORRO中nz-table 大小屏幕自适应、滚动条、点击事件

    首先来说屏幕自适应 HTML <div class="container right_table"> <nz-table #basicTable nzBorder ...

  8. Cnblogs博客皮肤开发调试最佳方案

    Cnblogs博客园支持自定义js来美化站点(需要申请JS权限),可以将主题托管到自己的云资源或CDN加速节点节点上. 例如我的网站为 www.example.com(IP或其它host),我将编译后 ...

  9. mysql-01数据库基本简介

    1.数据库的概念 DB:数据库(database):存储数据的"仓库".它保存了一系列有组织的数据. DBMS:数据库管理系统(Database Management System ...

  10. python新冠疫情分析-世界疫情数据爬取

    事情发展:1.毕业设计是关于疫情数据的可视化展示(基于java,需要做数据可视化,需要做管理员端对数据进行增删改查处理)2.飞起来速度学爬虫,参考了非常多资料,比如b站的黑马爬取(报错,就是在切片那里 ...