實(shí)用js庫(kù)－使用JS庫(kù)Leaflet.js生成世界地圖并獲取標(biāo)注地址經(jīng)緯度。

isaced 發(fā)布于2019-08-01 16:06 / 2448人閱讀

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

介紹：Leaflet是一個(gè)開(kāi)源的JavaScript庫(kù)，對(duì)移動(dòng)端友好且對(duì)地圖有很好的交互性。大小僅僅只有 33 KB，同時(shí)具有大多數(shù)地圖所需要的特點(diǎn)。

Leaflet設(shè)計(jì)的非常簡(jiǎn)單易懂, 同時(shí)具有很好的性能和易用性。它在桌面端和移動(dòng)端都工作的相當(dāng)高效，并有大量的插件用于擴(kuò)張Leaflet的功能。
微信公眾號(hào)：673399718嘻嘻
demo圖如下：

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

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

maxZoom: 18,
id: "mapbox.streets"

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

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

leaflet.js中有兩個(gè)接口locationerror是獲取本地地址失敗后調(diào)用的回調(diào)函數(shù)，而locationfound是獲取獲取本地地址成功后的回調(diào)。
確保所有的代碼都在創(chuàng)建div標(biāo)簽和引用leaflet.js之前。這樣應(yīng)該沒(méi)有什么問(wèn)題了，你現(xiàn)在應(yīng)用有一個(gè)可以使用的Leaflet地圖了。

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

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

}

代碼：


Title


    新建倉(cāng)庫(kù)


    
        
            倉(cāng)庫(kù)名稱
            
                
            
        
        
            倉(cāng)庫(kù)地址
            
                
            
        
        
            地址經(jīng)度
            
                
            
        
        
            地址緯度
            
                
            
        
        
            
            返回
            請(qǐng)?jiān)诘貓D中選擇您倉(cāng)庫(kù)的地理位置，以便存儲(chǔ)倉(cāng)庫(kù)信息。