7. 弹窗标记
作者：互联网
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 // 弹窗标记
65 mapMarker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
66 </script>
67
68 </body>
69 </html>
标签：const,缩放,标记,mapMarker,marker,mymap,弹窗,icon 来源： https://www.cnblogs.com/jyjy28/p/16149329.html