如何获得标记位置(传单serach Nominatim)

时间:2017-06-19 06:46:54

标签: javascript properties leaflet

我不确定,如何从地图上显示的标记位置获取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: '&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);
 });

我需要从该位置使用Lat Lng,以便将来添加标记。

1 个答案:

答案 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>

希望它可以帮到你