文字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>

 

posted @ 2022-04-15 21:59  sky-su  阅读(24)  评论(0)    收藏  举报