我不确定,如何从地图上显示的标记位置获取lat和lng?
这里有一个jsfiddle(对不起,不知道如何从github插入js): https://jsfiddle.net/qkcc3r2o/2/
输入字段未显示在jsfiddle :(
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: '© <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);
});
我需要从该位置使用Lat Lng,以便将来添加标记。
答案 0 :(得分:0)
.search-input {
font-family:Courier
}
.search-input,
.leaflet-control-search {
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>
var map = new L.Map('map', {zoom: 9, center: new L.latLng([18.5,73.8]) });
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer
map.addControl( new L.Control.Search({
url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat','lon'],
marker: L.marker([0,0]).addTo(map).on('click', getLatLon),
autoCollapse: true,
autoType: false,
minLength: 2
})
);
function getLatLon(e) {
alert(this.getLatLng());
}
</script>
<script type="text/javascript" src="http://labs.easyblog.it/labs-common.js"></script>
希望它可以帮到你