9.增加Marker 标记

2022-04-15 17:03:32 阅读：382 来源： 互联网

标签：const 缩放标记增加 Marker mymap 图标 png 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             html,body {
14                 height: 100%;
15             }
16 
17             #mapid {
18                 height: 500px;
19             }
20         </style>
21     </head>
22     <body>
23         <div id="mapid"></div>
24 
25         <script type="text/javascript" src="leaflet/leaflet.js"></script>
26 
27         <script type="text/javascript">
28         const {dir} = console;
29             const mymapOptions = {
30                 // 地图中心
31                 center: [50.5, 30.5],
32                 // 地图的最小缩放级别
33                 minZoom: 12,
34                 // 初始化时的缩放等级
35                 zoom: 13,
36                 // 地图的最大缩放级别
37                 maxZoom: 14,
38                 // 强制让地图的缩放级别始终为这个值的倍数
39                 zoomSnap: 1,
40                 // 版权控件添加到地图中（即水印）
41                 attributionControl: false,
42                 // 是否显示zoom 缩放控件,默认是true
43                 zoomControl: true,
44             }
45 
46             const mymap = L.map('mapid', mymapOptions);
47             dir('getBounds()', mymap.getBounds())
48             
49         
50 
51         
52 
53             const imageUrl = './leaflet/images/b1-floor1-full-h.png';
54             const imageBounds = [
55                 [50.52728768645296, 30.62301635742188],
56                 [50.472692651662115, 30.376853942871097]
57             ];
58             
59             const imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mymap);
60             
61             // 监听事件
62             mymap.on('click', (e) => {
63                 console.log('e', e)
64                 
65                 const myIcon = L.icon({
66                     iconUrl: './leaflet/images/marker-icon.png.png',
67                     iconSize: [38, 95],
68                     // 图标 "tip" 的坐标（相对于其左上角）。
69                     //图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
70                     iconAnchor: [22, 94],
71                     // 弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开
72                     popupAnchor: [-3, -76],
73                 
74                 });
75                 
76                 const markerOptions = {
77                     icon: myIcon,
78                 }
79                 
80             
81                 const markerLatlng = L.latLng(e.latlng);
82                 
83                 const mapMarker = L.marker(markerLatlng).addTo(mymap);
84             })
85         
86         </script>
87 
88     </body>
89 </html>

标签：const,缩放,标记,增加,Marker,mymap,图标,png,icon
来源： https://www.cnblogs.com/jyjy28/p/16149966.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

9.增加Marker 标记