001-Leaflet-地图初始化

一、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>001-Leaflet-地图初始化</title>
 9     <link rel="stylesheet" href="../leaflet/leaflet.css">
10     <style type="text/css">
11         html,
12         body {
13             margin: 0;
14             padding: 0;
15         }
16 
17         #map {
18             width: 100%;
19             height: 100vh;
20         }
21     </style>
22 </head>
23 
24 <body>
25     <div id="map"></div>
26     <script src="../leaflet/leaflet.js"></script>
27     <script>
28         //地图初始化
29         var map = L.map('map').setView([39.915085, 116.3683244], 13);
30         //添加图层
31         L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {
32             attribution: '<a href="https://www.cnblogs.com/RadyGo/">我的博客</a>'
33         }).addTo(map);
34         //添加点位
35         L.marker([39.915085, 116.3683244]).addTo(map)
36             .bindPopup('可自定义的弹框内容。')
37             .openPopup();
38     </script>
39 </body>
40 
41 </html>

二、效果

 

posted @ 2023-05-19 09:08  Fetion  阅读(70)  评论(0)  编辑  收藏  举报