这是一个非常简单例子,用来展示leaflet的基本使用方法。 Basic usage of leaflet.
- 引入leaflet的css和js
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Funpkg.com%2Fleaflet%401.0.3%2Fdist%2Fleaflet.css"/>
<script src="proxy.php?url=https%3A%2F%2Funpkg.com%2Fleaflet%401.0.3%2Fdist%2Fleaflet-src.js"></script>
- body内定义一个用来表示地图的div要素。
<div id="map"></div>
- 引入OpenStreetMap图层
设置图层的中心点经纬度和地图放大倍数。[维度,经度]
var map = L.map('map').setView([34.255028, 108.942963], 14);
- 引入OSM的图层到map对象
//引入OSM的图层到map对象。
var mapLink = '<a href="proxy.php?url=http%3A%2F%2Fopenstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Map data © ' + mapLink,
maxZoom: 18
}
).addTo(map);