leaflet創建簡單地圖

一、leaflet介紹：

1.Leaflet 是一個為建設移動設備友好的互動地圖，而開發的現代的、開源的 JavaScript 庫。它是由 Vladimir Agafonkin 帶領一個專業貢獻者團隊開發，雖然代碼僅有 33 KB，但它具有開發人員開發在線地圖的大部分功能。

2.Leaflet設計堅持簡便、高性能和可用性好的思想，在所有主要桌面和移動平台能高效運作，在現代瀏覽器上會利用HTML5和CSS3的優勢，同時也支持舊的瀏覽器訪問。支持插件擴展，有一個友好、易於使用的API文檔和一個簡單的、可讀的源代碼。

官網：http://leafletjs.com/

二、快速入門

1.在html頁面頭部加入CSS file 和JavaScript file

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>

 

2.在body里面定義一個層

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

3.加入js代碼來實現地圖的顯示

<script type="text/javascript">
            var mymap = L.map('mapid').setView([35.5,104.6],9);
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                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>',
                maxZoom: 18,
            }).addTo(mymap);
            var marker = L.marker([35.5,104.6]).addTo(mymap);
            var circle = L.circle([35.5,104.8], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 500
            }).addTo(mymap);
            var polygon = L.polygon([
                [35.5, 104.3],
                [35.5, 104.4],
                [35.5, 104.5]
            ]).addTo(mymap);
</script>

下面我來一一介紹一下js代碼中所用到的幾個函數及其里面的參數：

map方法：實例化了<DIV>元素的DOM對象ID的地圖和一個可選的對象文字與地圖選項。

　　參數：他的第一個參數可以是一個id也可以是一個html元素，后面的可選參數就不在這里做一一介紹了。

setView方法：設置地圖的視圖（地理中心和縮放）與給定的動畫選項。

　　參數：第一個參數是地理位置的緯度和經度。通過這個地理位置的經緯度將會在地圖頁面打開時顯示在頁面的中心位置。

　　　　　第二個參數是設置可縮放值。后面的可選參數就不做介紹了。

tileLayer方法：用於在地圖上加載和顯示瓷磚層

　　參數：第一個參數是一個url：{s}代表可選的子領域，連續的被用來幫助瀏覽器並行請求每個域的限制。子領域值可在后面的選項中指定。a或b或c，在默認情況下可省略。

　　　　  后面好多可選的參數就不在這里一一指定了。

后面的marker、circle、polygon方法分別是用來在地圖上添加標記，圓和多邊形的。