開源輕量級移動端友好的JS地圖庫——leaflet學習教程

Leaflet 是一個為建設交互性好適用於移動設備地圖，而開發的現代的、開源的 JavaScript 庫。代碼僅有 33 KB，但它具有開發在線地圖的大部分功能。Leaflet設計堅持簡便、高性能和可用性好的哲學思想，在所有主要桌面和移動平台能高效運作，在現代瀏覽器上會利用HTML5和CSS3的優勢，同時也支持舊的瀏覽器訪問。支持插件擴展，有一個友好、易於使用的API文檔和一個簡單的、可讀的源代碼。Leaflet強大的開源庫插件涉及到地圖應用的各個方面包括地圖服務，數據提供，數據格式，地理編碼，路線和路線搜索，地圖控件和交互等類型的插件共有140多個。這些控件 豐富leaflet的功能，同時也可以十分方便的實現自定義的控件具有良好的可擴展性。 官網

---

###LeafLet快速入門教程 本教程將一步一步的指導你如何使用Leaflet加載地圖、使用標記,折線和彈出窗口,處理事件。 ####如何用leaflet快速加載地圖

• 引入CSS文件

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

  引用JavaScript

  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

  頁面添加一個div作為地圖的容器

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

  確定map容器的高度

  #map { height: 180px; }

  

• ####設置地圖 設置地圖中心和縮放級別

  var map = L.map('map').setView([51.505, -0.09], 13);

  添加圖層

   L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{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(map);

  ####添加標注、圓形、多邊形

• #####添加標注

  var marker = L.marker([51.5, -0.09]).addTo(map);

  #####添加圓形

  var circle = L.circle([51.508, -0.11], 500, {
       color: 'red',
          fillColor: '#f03',
       fillOpacity: 0.5
      }).addTo(map);

  #####添加多邊形

   var polygon = L.polygon([
       [51.509, -0.08],
       [51.503, -0.06],
          [51.51, -0.047]
      ]).addTo(map);

  

• #####為覆蓋物標注、圓、多邊形添加彈出氣泡

  marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
      circle.bindPopup("I am a circle.");
      polygon.bindPopup("I am a polygon.");

  

•  

  #####處理事件

• function onMapClick(e) {
       alert("You clicked the map at " + e.latlng);
      }
      map.on('click', onMapClick);

   

• 轉自 thinkgis