简体   繁体   中英

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

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

_getLocation(this._input.value)

This function returns the information you need. You can see it's called inside the _handleSubmit function like this:

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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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