一、代码
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>
二、效果
标签：初始化,map,116.3683244,地图,Leaflet,001 From： https://www.cnblogs.com/RadyGo/p/17413924.html