3. Tooltip 工具提示
2024-09-08 15:41:19
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: [50.5, 30.5],
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 const myIcon = L.icon({
45 iconUrl: './leaflet/images/marker-icon.png.png',
46 iconSize: [38, 95],
47 // 图标 "tip" 的坐标（相对于其左上角）。
48 //图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
49 iconAnchor: [22, 94],
50 // 弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开
51 popupAnchor: [-3, -76],
52
53 });
54
55 const markerOptions = {
56 icon: myIcon,
57 // 不生效，默认是没有tooltip 提示
58 title: 'ddddd'
59 }
60
61 const mapMarker = L.marker(markerLatlng).addTo(mymap);
62 // const mapMarker = L.marker([50.5, 30.5]).addTo(mymap); 可以是数组的形式
63
64 // Tooltip 提示标记
65 mapMarker.bindTooltip('ffffffff').openTooltip();
66
67
68 </script>
69
70 </body>
71 </html>
最新文章
- 使用plsql创建表空间和用户
- [CareerCup] 7.7 The Number with Only Prime Factors 只有质数因子的数字
- NOIP2014 day2 T2 洛谷P2296 寻找道路
- 使用自定义模板为Myeclipse添加新建Filter的功能
- 003.ASP.NET MVC集中管理Session
- 基于Linux2.6内核的加密容器法保护文件方法
- 实验三——SDRAM
- BaseAdapter中重写getview的心得以及发现convertView回收的机制
- C#实现FTP文件夹下载功能【转载】
- innodb的innodb_buffer_pool_size和MyISAM的key_buffer_size
- 用4bit的counter看同步复位与异步复位
- 关于MATLAB处理大数据坐标文件2017526
- 【转】学习FFmpeg API – 解码视频
- 用node探究http缓存
- 【转】QT 添加外部库文件
- CentOS7的网卡重启方法
- 同一个dll 不同路径下注册 一个失败 一个成功
- 实验六 MapReduce实验：二次排序
- git常用命令2--- git rebase
- oracle显示一个月的所有天数