📌  相关文章
📜  leaflet.js cdn - Javascript (1)

📅  最后修改于: 2023-12-03 15:02:40.107000             🧑  作者: Mango

Leaflet.js CDN - Javascript

介绍

Leaflet.js是一个用于创建交互式地图的JavaScript库。它易于使用，支持移动设备，并且具有广泛的插件和API可用性。Leaflet的核心代码大小只有38kB，可以轻松地与其他库结合使用，例如jQuery、React、Angular等。使用CDN（内容分发网络）可以轻松地将Leaflet添加到您的代码中，而无需下载和安装库。

使用CDN添加Leaflet到您的网站

为了在网站上使用Leaflet.js，您需要在HTML文件中包含JavaScript和CSS文件。

步骤1：添加CSS和JavaScript文件

使用以下代码在HTML文件的head标记中引入CSS和JavaScript文件。

<!DOCTYPE html>
<html>
<head>
	<title>使用Leaflet.js创建交互式地图</title>
    
    <!-- 引入 Leaflet's CSS -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha384-v+vwWTfJ8WzZHoPvfc+chDa3FqGAev8W92DQ1vIcR9JlmDMXo8cPr/UZJvM0RIna"
        crossorigin="anonymous">

    <!-- 引入 Leaflet's JavaScript -->
    <script src="//cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha384-fUNpXAtBbl/n4Yo4/OMTpANZc+l7VQKVrx1yKe7V+oWiPuvTGX9iNDjz4YG4bZ/o"
        crossorigin="anonymous"></script>
</head>
<body>
	<!-- 你的代码将在这里 -->
</body>
</html>
步骤2：创建一个地图容器

使用以下代码创建一个容器，该容器将容纳地图。您可以在容器中设置宽度和高度等样式。

<div id="mapid"></div>
步骤3：初始化地图

使用以下代码初始化地图。您需要提供一个ID，该ID是对地图容器的引用。

<script>
	// 使用Leaflet的L.map()函数初始化地图
	var mymap = L.map('mapid');

	// 设置视图中心的坐标和缩放级别
	mymap.setView([51.505, -0.09], 13);

	// 添加地图图层
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
	    maxZoom: 18,
	    tileSize: 512,
	    zoomOffset: -1
	}).addTo(mymap);
</script>

以上代码将创建一个包含OpenStreetMap图层的地图，并将其置于用于呈现地图的容器内。

结论

借助Leaflet.js，您可以轻松地创建交互式地图，并将其添加到网站中。使用CDN可以使添加Leaflet更加简单，因为您不必在本地下载和安装库。如需了解更多信息，请参阅Leaflet文档。