2017-06-19 54 views
0

我不確定,如何從地圖上顯示的標記位置獲取緯度和經度。如何獲得標記位置(小冊子serach Nominatim)

這裏一個的jsfiddle(對不起,不知道該如何從GitHub插入JS):

$(document).ready(function(){ 

var map = new L.Map('map-adress', {zoom: 3, center: new L.latLng([24.61, -34.63]) }); 
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
})); 


var markersLayer = new L.LayerGroup(); //layer contain searched elements 
map.addLayer(markersLayer); 

map.addControl(new L.Control.Search({ 
    container: 'findbox-adress', 
    url: 'http://nominatim.openstreetmap.org/search?format=json&street={s}', 
    jsonpParam: 'json_callback', 
    propertyName: 'display_name', 
    propertyLoc: ['lat','lon'], 
    marker: L.circleMarker([0,0],{radius:30}), 
    autoCollapse: false, 
    collapsed: false, 
    autoType: false, 
    minLength: 2, 
    autoResize: false, 
    zoom: 18 
})); 

$(".search-button").remove(); 
$(".search-input").attr("Placeholder", "Street, No."); 

console.log(map.addControl.propertyLoc); 
}); 
https://jsfiddle.net/qkcc3r2o/2/

輸入欄不在的jsfiddle :(

JS所示

我需要位置的Lat Lng,以便將來添加標記。

回答

0

.search-input { 
 
\t font-family:Courier 
 
} 
 
.search-input, 
 
.leaflet-control-search { 
 
\t max-width:400px; 
 
}
<link rel="stylesheet" href="http://labs.easyblog.it/maps/leaflet/dist/leaflet.css" /> 
 
<link rel="stylesheet" href="http://labs.easyblog.it/maps/leaflet-search/src/leaflet-search.css" /> 
 
<link rel="stylesheet" href="http://labs.easyblog.it/maps/leaflet-search/style.css" /> 
 

 
<div id="map"></div> 
 
<script src="http://labs.easyblog.it/maps/leaflet/dist/leaflet.js"></script> 
 
<script src="http://labs.easyblog.it/maps/leaflet-search/src/leaflet-search.js"></script> 
 
<script> 
 

 
\t var map = new L.Map('map', {zoom: 9, center: new L.latLng([18.5,73.8]) }); 
 
\t map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); \t //base layer 
 
\t 
 
\t map.addControl(new L.Control.Search({ 
 
\t \t url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}', 
 
\t \t jsonpParam: 'json_callback', 
 
\t \t propertyName: 'display_name', 
 
\t \t propertyLoc: ['lat','lon'], 
 
\t \t marker: L.marker([0,0]).addTo(map).on('click', getLatLon), 
 
\t \t autoCollapse: true, 
 
\t \t autoType: false, 
 
\t \t minLength: 2 
 
\t })  
 
); 
 
    
 
    function getLatLon(e) { 
 
    alert(this.getLatLng()); 
 
} 
 
</script> 
 

 

 
<script type="text/javascript" src="http://labs.easyblog.it/labs-common.js"></script>

希望它可以幫助你

+0

感謝anwser,我會檢查它的明天。希望它能起作用。 – c00L

+0

歡迎@ c00L :) –

+0

甜,它的工作。謝謝你,這會幫助我很多。 :) – c00L