1. 地图的初始化

https://leafletjs.cn/reference-1.7.1.html#latlngbounds

复制代码
 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: [51.505, -0.09],
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 
43             const mymap = L.map('mapid', mymapOptions);
44         </script>
45 
46     </body>
47 </html>
复制代码

 

posted @   sky-su  阅读(83)  评论(0)  编辑  收藏  举报
相关博文：
·  6.经纬度的创建
·  2. Marker 标记(就是在地图上放上标记)
·  001-Leaflet-地图初始化
·  加载wkt到地图 Demo (可直接运行）
·  地图：leaflet基本使用
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示
AI IDE Trae