Leaflet入门之地图显示

leaflet是领先的开源JavaScript库为移动设备设计的互动地图。重33 KB的JS,所有映射大多数开发人员所需要的特性。

leaflet设计简单,性能和可用性。它有效地在所有主要的桌面和移动平台,可以扩展的插件,有一个美丽的,易于使用和证据确凿的API和一个简单的、易读的源代码,是一个快乐作出贡献。

官网：http://leafletjs.com/

本文实现Leaflet的最基本的功能，在web中加载地图。实现步骤如下:

1，引入Leaflet所需文件：

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

2，在body中创建用于显示地图的div

<div id="map-container"></div>

需要给div设置宽度、高度

<style>
    #map-container {
        width: 100%;
        height: 500px;
    }
</style>

3，显示地图

<script>
    var m = L.map('map-container').setView([36.52,120.31], 7);
    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="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(m);
</script>

注：这段代码需要写在div下面，不然会报错—— Map container not found.

4，打开浏览器，查看效果

说明：上述加载的是Mapobx的图层，关于MapBox的内容请看：http://malagis.com/leaflet-note-2-use-mapbox.html

参考博客：http://malagis.com/leaflet-note-1-easy-start.html

<

转载自：https://blog.csdn.net/u013517229/article/details/78175797