2017-06-19 18 views
0

マップに表示されているマーカーの位置からlatとlngを取得する方法はわかりません。ここでマーカーの位置を取得する方法(リーフレット奉仕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>

はanwserのために、私は明日それをチェックしましょう、それはあなたに

+0

感謝をお役に立てば幸いです。それが動作することを願っています。 – c00L

+0

ようこそ@ c00L :) –

+0

甘い、それは働いています。ありがとう、それは私をたくさん助けます。 :) – c00L

関連する問題