简体   繁体   English

使用Leaflet Control Search从地址获取并显示纬度

[英]Get and display lat long from address using Leaflet Control Search

I am using leaflet.js and this plugin: https://github.com/stefanocudini/leaflet-search and need a way of getting the lat and long coordinates from the address search and putting them into an input field, or just being able to use them... 我正在使用leaflet.js和此插件: https : //github.com/stefanocudini/leaflet-search ,需要一种从地址搜索中获取经纬度坐标并将其放入输入字段的方法,或者只是能够使用它们...

The answer may well be in the code below, just can't figure out how to do it... 答案很可能在下面的代码中,只是不知道该怎么做...

                var geocoder = new google.maps.Geocoder();

                function googleGeocoding(text, callResponse)
                {
                    geocoder.geocode({address: text}, callResponse);
                }

                function filterJSONCall(rawjson)
                {
                    var json = {},
                        key, loc, disp = [];

                    for(var i in rawjson)
                    {
                        key = rawjson[i].formatted_address;

                        loc = L.latLng( rawjson[i].geometry.location.lat(), rawjson[i].geometry.location.lng() );

                        json[ key ]= loc;   //key,value format
                    }

                    return json;
                }

                map.addControl( new L.Control.Search({
                        callData: googleGeocoding,
                        filterJSON: filterJSONCall,
                        wrapper: 'findbox',
                        markerLocation: true,
                        autoType: false,
                        autoCollapse: true,
                        minLength: 5,
                        zoom: 10,
                        initial: true,
                        collapsed: false,
                        tipAutoSubmit: false,
                        autoResize: false,
                        text: 'Enter an Address'
                    }) );

Inside the leaflet-search.js file you have a function called 在leaflet-search.js文件中,您具有一个名为

_getLocation(this._input.value) _getLocation(this._input.value)

This function returns the information you need. 此函数返回您需要的信息。 You can see it's called inside the _handleSubmit function like this: 您可以看到它在_handleSubmit函数内部被调用,如下所示:

var loc = this._getLocation(this._input.value);

If you do: 如果您这样做:

console.log("Latitude: " + loc.lat);
console.log("Longitude: " + loc.lng);

bellow this call in leaflet-search.js you will get the info you need in the console. 在leaflet-search.js中进行此调用后,您将在控制台中获得所需的信息。

I gave you the info you needed, now it's up to you to use it how you like. 我给了您所需的信息,现在您可以根据自己的喜好使用它。 Make a public function then access it inside your code or whatever you want. 设置一个公共函数,然后在您的代码或任何您想要的内部访问它。

 var searchbox =  new L.Control.Search({
                            callData: googleGeocoding,
                            filterJSON: filterJSONCall,
                            wrapper: 'findbox',
                            markerLocation: true,
                            autoType: false,
                            autoCollapse: true,
                            minLength: 5,
                            zoom: 10,
                            initial: true,
                            collapsed: false,
                            tipAutoSubmit: false,
                            autoResize: false,
                            text: 'Enter an Address'
                        });

    searchbox.on('search_locationfound', function(e) {
                var locLat = e.latlng.lat;
                var locLng = e.latlng.lng;
                console.log(locLat+', '+locLng);
            });

This works fine with me. 这对我来说很好。 I hope I might help other people with this. 我希望我可以帮助其他人。 :) :)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM