文字icon
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的更多相关文章
- SDL显示文字
前面教程里,我们只显示图片,没提到如何显示文字, SDL本身没有显示文字功能,它需要用扩展库SDL_ttf来显示文字.ttf是True Type Font的缩写,ttf是Windows下的缺省字体,它 ...
- iconfont的蜕化操作
很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网 ...
- AppCan学习笔记--数据存储及listview简单应用
AppCan AppCan开发平台简介 AppCan是Hybrid App开发框架即混合开发框架,有官方提供底层功能使用API HTML5和JavaScript只是作为一种解析语言,真正调用的都是Na ...
- winform窗体（二）——控件
一.窗体的事件 每一个窗体都有一个事件,这个窗体加载完成之后执行哪一段代码 位置:1)右键属性→事件→load 双击进入 2)双击窗体任意一个位置进入 删除事件:先将事件页面里面的挂好的事件删除,再删 ...
- winform窗体控件（全）
回顾跟补充下除了昨天那常用6个其他的winform窗体控件作用 1:Button:按钮 (1)AutoSize:如果是True的情况下,内容将会撑开:False的话会另起一行 (2)Enabled: ...
- WindowsForm公共控件--2016年12月5日
Button text:修改按钮显示的文字 CheckBox Checked:是否选中 CheckedListBox checkedListBox.Items.Add(显示的值,初始选中状态); ch ...
- Winform 控件
※控件在视图工具箱里面找,找到之后双击即可添加进来,也可以点住拖进来 ※每个工具,控件,窗体都有一个name,相当于id,用来标识该对象的名称,name值不允许重复 控件: 1.Label -- 文本 ...
- WinForm 控件（下）
10.PictureBox 外观,Image可以选择图片路径行为,SizeMode可以设置图片大小布局方式 11.Imagelist--图片集 imageList1.Images[n]; 12.not ...
- mint-ui —— navbar和tab-container的区别
navbar的具体实现 <template> <div class="page-navbar"> <div class="page-titl ...
- web项目中js加载慢问题解决思路
最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: < ...
随机推荐
- screenfetch—最炫酷的查看你的设备信息
screenfetch是一个很方便的并且很炫酷的一个程序,它可以做到很炫酷的输出你想要看到的系统信息. 只需要短短一行命令,就可以快速的安装上它.! 并且可以直观的显示出来,当前设备的信息.
- [深度学习] tf.keras入门5-模型保存和载入
目录 设置 基于checkpoints的模型保存 通过ModelCheckpoint模块来自动保存数据 手动保存权重 整个模型保存 总体代码 模型可以在训练中或者训练完成后保存.具体文档参考:http ...
- 企业应用架构研究系列二十五：IdentityServer4 认证服务搭建
IdentityServer4 更新了开源协议,曾经想替换它,不在使用IdentityServer4 ,但是后来,研究来研究去,发现IdentityServer4 的功能实在是强大,设计体系完整,随着 ...
- vue打包---放到服务器下（一个服务器多个项目需要配置路径），以及哈希模式和历史模式的不同配置方法
哈希模式,好用,不需要服务器配合分配路径指向,自己单机就可以打开了 接下来上代码截图 接下来开始截图 历史模式 历史模式需要后端支持 打包后自己直接点击是打不开的 截图如下
- 轻松理解Promise.all 、Promise.then、Promise.race有什么区别以及使用方法
简单来说呢,Promse.all一般应用于某个场景需要多个接口数据合并起来才能实现 有个极大地好处我必须说一下,请求顺序和获取数据顺序是一样的哟,大可放心使用~~ const success1 = n ...
- 超级容易理解的Three.js中的物体rotation
假设模特头朝着自己现在躺在地上 那么改变Y就是等于躺着转圈圈 mesh.rotation.set( 0,Math.PI/1.2,0); 改变X就意味着,这个是本来模特头朝着自己躺着,然后站起来了,后脑 ...
- Grafana 系列文章（三）：Tempo-使用 HTTP 推送 Spans
️URL: https://grafana.com/docs/tempo/latest/api_docs/pushing-spans-with-http/ Description: 有时,使用追踪系统 ...
- 1.31 wlx 魔怔 9 解法交互题小结
参考题解地址 1. 从树上任意一个节点开始,跳到其随机一个后代,跳到叶子的期望次数为 \(H_{siz_u}=\ln(siz_u)\). 证明: 首先考虑一条链的情况.设在第 \(i\) 个点期望次数 ...
- ArrayList使用步骤-常用方法和遍历
ArrayList使用步骤 查看类 java.util.ArrayList :该类需要 import导入使后使用. 表示一种指定的数据类型,叫做泛型. E ,取自Element(元素)的首字母.在出现 ...
- Unity项目优化——Web版
Unity项目优化--Web版 大家好,这是小黑第一次写文章(哈哈哈哈哈,好激动),我好好的写,有不对的地方多多指出. 首先呢是版本介绍,不过好像版本对于优化没有影响: 不过还是要告诉大家我用的版本: ...