5. 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             #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         </script>
65
66     </body>
67 </html>