CSS和HTML改如何设置

如下的设置：


body {
	padding: 0;
	margin: 0;
}
html, body, #map {
	height: 100%;
	width: 100vw;
}

这里还要设置禁止浏览器进行不必要的放缩

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

上面是官方的给出的，下面是本人个人的看法，css应该这么写！


	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 100%;
			height: 100%;
		}
	</style>

这样，整个屏幕都是地图了

定位功能

我先把官方代码贴上了吧


<!DOCTYPE html>
<html>
<head>
	
	<title>Mobile tutorial - Leaflet</title>
 
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
 
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
 
 
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 600px;
			height: 400px;
		}
	</style>
 
	<style>body { padding: 0; margin: 0; } #map { height: 100%; width: 100vw; }</style>
</head>
<body>
 
<div id='map'></div>
 
<script>
	var map = L.map('map').fitWorld();
 
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sahttps://cdn.jxasp.com:9143/image/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(map);
 
	function onLocationFound(e) {
		var radius = e.accuracy / 2;
 
		L.marker(e.latlng).addTo(map)
			.bindPopup("You are within " + radius + " meters from this point").openPopup();
 
		L.circle(e.latlng, radius).addTo(map);
	}
 
	function onLocationError(e) {
		alert(e.message);
	}
 
	map.on('locationfound', onLocationFound);
	map.on('locationerror', onLocationError);
 
	map.locate({setView: true, maxZoom: 16});
</script>
 
 
 
</body>
</html>