【问题标题】:How to get the marker location (leaflet serach Nominatim)如何获取标记位置(传单 serach Nominatim)
【发布时间】:2017-06-19 06:46:53
【问题描述】:

我不确定,如何从地图上显示的标记位置获取 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,以便将来添加标记。

【问题讨论】:

    标签: javascript properties leaflet


    【解决方案1】:

    .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>

    希望对你有帮助

    【讨论】:

    • 谢谢你的回答,我明天去看看。希望它会奏效。 ?
    • 欢迎@c00L :)
    • 甜,它正在工作。谢谢你,这对我有很大帮助。 :)
    • @c00L 太好了.. :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-07-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-24
    相关资源
    最近更新 更多