leaflet加载OSM地图

最新推荐文章于 2022-08-03 14:04:32 发布

X__U

最新推荐文章于 2022-08-03 14:04:32 发布

阅读量1.8k

点赞数 1

分类专栏： leaflet

本文链接：https://blog.csdn.net/xu762102319/article/details/88828616

版权

leaflet 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

接触了leaflet，想着抽时间把自己用过的leaflet的功能都自己写一遍。先从最基本的加载第一张地图开始吧。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="leaflet1.34/leaflet-src.js"></script>
	<link rel="stylesheet" href="leaflet1.34/leaflet.css">
<style>
		html,body{
			width: 100%;
			height: 100%;
		}
		#mapDiv{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="mapDiv"></div>
	<script>
		var map = L.map("mapDiv").setView([36.55,117.32],13);
		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
	</script>
	</head>
<body>
</body>
</html>

代码虽然简单，但是也有一些需要注意的地方，1.想要让地图占满整个屏幕，除了设置地图容器mapDiv宽高为100%，还要把父元素body和html的宽高设置为100%，不然mapDiv的高度始终为0。
2.加载地图的js代码要写在body中，因为要先创建body中的地图容器mapDiv才能进行地图的加载，若将加载地图的js代码写在head中，就会报错地图容器不存在。
3.前两条是基础的前端小问题，关于leaflet的问题在于setView（）中第一个参数也就是中心点坐标，纬度在前经度在后，和ArcGIS API有所不同（ArcGIS是先经度再纬度）。

X__U

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
leaflet加载OSM地图

接触了leaflet，想着抽时间把自己用过的leaflet的功能都自己写一遍。先从最基本的加载第一张地图开始吧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="l...
复制链接

扫一扫