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

時間 2019-11-08

標籤實用使用 leaflet.js leaflet 生成世界地圖獲取標註地址經緯度欄目 JavaScript 简体版

原文原文鏈接

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

Leaflet設計的很是簡單易懂, 同時具備很好的性能和易用性。它在桌面端和移動端都工做的至關高效，並有大量的插件用於擴張Leaflet的功能。
微信公衆號：673399718嘻嘻
demo圖以下：
html

使用leaflet.js生成世界地圖很是方便，配置參數記錄下，有興趣的能夠看看本例中引入jquery操做dom。
首先：在頁面的頭部引入css文件cdn地址：
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaf... />
在body前引入js文件cdn地址：
<script src="http://cdn.leafletjs.com/leaf...
將id爲mapid的div標籤放到地圖顯示的地方：jquery

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

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', {api

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) {dom

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

}函數

代碼：
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
<style>
    #mapid {
        float: left;
        height: 500px;
        width: 800px;
        margin-left: 60px;
    }
    #right{
        height: 500px;
        width: 500px;
        float: right;
        background: rgb(92, 184, 92);
    }
</style>

</head>
<body>
<div class="panel panel-default">

<div class="panel-heading">
    <h3 class="panel-title">新建倉庫</h3>
</div>
<div class="panel-body">
    <div class="container">
        <div class="form-group">
            <label  class="col-sm-1 control-label">倉庫名稱</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" id=name" placeholder="輸入您的倉庫名">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-1 control-label">倉庫地址</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" id="addr">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-1 control-label">地址經度</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" id="lat" >
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-1 control-label">地址緯度</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" id="lon" >
            </div>
        </div>
        <div class="col-md-6" style="margin-top: 20px">
            <button id="referred" class="btn btn-success">肯定</button>
            <a id="back" class="btn btn-success">返回</a>
            <span>請在地圖中選擇您倉庫的地理位置，以便存儲倉庫信息。</span>
        </div>

    </div>
    <div id="mapid"></div>
    <div id="right"></div>
</div>

</div>
<script src="http://cdn.leafletjs.com/leaf...
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>

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);

function onLocationFound(e) {
    L.marker(e.latlng,{draggable: true})
            .addTo(mymap)
            .bindPopup("請選擇倉庫位置!").openPopup()
            .on('dragend', function (event) {
                var marker = event.target;
                var latlng = marker.getLatLng();
                position.push(latlng);
            });

}

function onLocationError() {
    L.marker([51.5, -0.09],{draggable: true})
            .addTo(mymap)
            .bindPopup("<b>請選擇倉庫位置!</b>").openPopup()
            .on('dragend', function (event) {
                var marker = event.target;
                var latlng = marker.getLatLng();
                position.push(latlng);
            });
}

mymap.on('locationerror', onLocationError);
mymap.on('locationfound', onLocationFound);
var popup = L.popup();

function onMapClick(e) {
    popup
            .setLatLng(e.latlng)
            .setContent("你點擊的位置在 " + e.latlng.toString())
            .openOn(mymap);
}

mymap.on('click', onMapClick);

$('#referred').click(function () {
    var name = $('#name').val();
    var address = $('#addr').val();
    if(name==''||address==''||position[position.length-1]==undefined){
        $('#referred').prop('disabled',false);
        $.toast({
            position: 'top-right',
            text:'請補全倉庫信息！',
            icon:'error'
        })
    }
    else {
        var lat =  position[position.length-1].lat;
        var lng =  position[position.length-1].lng;
        $('#lat').val(lat);
        $('#lon').val(lng);
        $('#right').text(position)
    }

});

</script></body></html>