国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

實用js庫－使用JS庫Leaflet.js生成世界地圖并獲取標注地址經緯度。

Lucky_Boy / 2696人閱讀

摘要：大小僅僅只有，同時具有大多數地圖所需要的特點。微信公眾號嘻嘻圖如下使用生成世界地圖非常方便，配置參數記錄下，有興趣的可以看看本例中引入操作。當用戶同意瀏覽器分享用戶位置后，地圖將自動調整視窗中心為該位置。

介紹：Leaflet是一個開源的JavaScript庫，對移動端友好且對地圖有很好的交互性。 大小僅僅只有 33 KB， 同時具有大多數地圖所需要的特點。

Leaflet設計的非常簡單易懂, 同時具有很好的性能和易用性。 它在桌面端和移動端都工作的相當高效，并有大量的插件用于擴張Leaflet的功能。
微信公眾號：673399718嘻嘻
demo圖如下：

使用leaflet.js生成世界地圖非常方便，配置參數記錄下，有興趣的可以看看本例中引入jquery操作dom。
首先：在頁面的頭部引入css文件cdn地址：
將id為mapid的div標簽放到地圖顯示的地方：


確保地圖容器有定義好的高度，例如在css文件中添加如下代碼：
＃mapid{ height: 180px; }
創建一個中心點在倫敦，使用Mapbox街道瓦片的地圖。首先初始化地圖，并且設置地圖在視窗的中心點和縮放級別：

var mymap = L.map("mapid").setView([51.505, -0.09], 13);
下一步在地圖上增加一個瓦片圖層(渲染的地圖圖片碎片)，在這個例子中我使用Mapbox街道瓦片圖層。創建一個瓦片圖層通常涉及到設置URL template來使用瓦片圖（獲得你的瓦片圖在Mapbox），設置的屬性還包括屬性文本和圖層的最大比例尺。
var mymap = L.map("mapid");
mymap.locate({setView: true, maxZoom: 16});
var position = [];
L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw", {

maxZoom: 18,
id: "mapbox.streets"

}).addTo(mymap);
Leaflet有一個非常巧妙的方法來處理地圖的縮放級別和探測用戶地理位置－－帶有setView選項的locate方法。使用常用的setView方法在這行代碼中：

locate({setView: true, maxZoom: 16})
這里我設置最大的縮放級別為16，并設置地圖根據位置自動調整窗口。當用戶同意瀏覽器分享用戶位置后，地圖將自動調整視窗中心為該位置。

leaflet.js中有兩個接口locationerror是獲取本地地址失敗后調用的回調函數，而locationfound是獲取獲取本地地址成功后的回調。
確保所有的代碼都在創建div標簽和引用leaflet.js之前。這樣應該沒有什么問題了，你現在應用有一個可以使用的Leaflet地圖了。

參數介紹：
marker可拖動要設置{draggable:true}參數
獲取mark的經緯度信息:marker.getLatLng();
代碼里我用了一個數組來存放拖動圖標返回的地址經緯度，獲取時只需要最后一個確定的位置，即數組最后一個元素：position[position.length-1].lat
彈出框的使用：給地圖綁定點擊事件，事件發生時，bindPopup方法會把HTML內容和彈出框綁定到一起。當你點擊這個對象之后，bindPopup將馬上打開一個彈出框。
function onMapClick(e) {

var popup = L.popup();
        popup
        .setLatLng(e.latlng)
        .setContent("你點擊的位置在 " + e.latlng.toString())
        .openOn(mymap);

}

代碼：



Title







    
新建倉庫





    

        

            
            

                
            

        

        

            
            

                
            

        

        

            
            

                
            

        

        

            
            

                
            

        

        

            
            返回
            請在地圖中選擇您倉庫的地理位置，以便存儲倉庫信息。





文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91347.html

相關文章

  • 實用js庫－使用JS庫Leaflet.js生成世界地圖并獲取標注地址經緯度。

    摘要：大小僅僅只有，同時具有大多數地圖所需要的特點。微信公眾號嘻嘻圖如下使用生成世界地圖非常方便，配置參數記錄下，有興趣的可以看看本例中引入操作。當用戶同意瀏覽器分享用戶位置后，地圖將自動調整視窗中心為該位置。 介紹：Leaflet是一個開源的JavaScript庫，對移動端友好且對地圖有很好的交互性。 大小僅僅只有 33 KB， 同時具有大多數地圖所需要的特點。 Leaflet設計的非常簡...

    seasonley 評論0 收藏0

  • 實用js庫－使用JS庫Leaflet.js生成世界地圖并獲取標注地址經緯度。

    摘要：大小僅僅只有，同時具有大多數地圖所需要的特點。微信公眾號嘻嘻圖如下使用生成世界地圖非常方便，配置參數記錄下，有興趣的可以看看本例中引入操作。當用戶同意瀏覽器分享用戶位置后，地圖將自動調整視窗中心為該位置。 介紹：Leaflet是一個開源的JavaScript庫，對移動端友好且對地圖有很好的交互性。 大小僅僅只有 33 KB， 同時具有大多數地圖所需要的特點。 Leaflet設計的非常簡...

    isaced 評論0 收藏0

  • Leaflet快速開始教程

    摘要：提示在官方教程的基礎上，增加了一些注釋以及鏈接，可幫助讀者更好的學習有不正確或有待改進的地方，歡迎批評指出。明確容器的高度。首先我們將初始化地圖，通過選定的地理坐標設置地圖視角以及縮放級別。 提示：在Leaflet官方教程的基礎上，增加了一些注釋以及鏈接，可幫助讀者更好的學習Leaflet,有不正確或有待改進的地方，歡迎批評指出。 Leaflet an open-source Java...

    gecko23 評論0 收藏0

  • 前端插件庫

    摘要：原文鏈接前端插件庫站點前端開發文檔博客前端插件庫前端插件庫官網是的函數庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數庫。 原文鏈接：前端插件庫站點：前端開發文檔博客：前端插件庫 前端插件庫 DataTables 官網：https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高勝山 評論0 收藏0

  • 前端插件庫

    摘要：原文鏈接前端插件庫站點前端開發文檔博客前端插件庫前端插件庫官網是的函數庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數庫。 原文鏈接：前端插件庫站點：前端開發文檔博客：前端插件庫 前端插件庫 DataTables 官網：https://www.datatables.net/ DataTables是jQuery的JavaScr...

    shusen 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<