Окно поиска Openstreemap не работает при интеграции в приложение

Question

Я использую следующий код, чтобы установить свойства OSM до отображения карты. Несмотря на то, что появляется окно поиска, я не вижу предложений, когда я набираю название страны.

Пожалуйста, найдите прикрепленный скриншот проблемы - введите описание изображения здесь

Я ищу, чтобы реализовать следующие функциональные возможности - http://labs.easyblog.it/maps/leaflet-search/examples/nominatim.html

angular.extend($scope, {
            london: {
                lat: 51.505,
                lng: -0.09,
                zoom: 4
            },
            controls: {
                draw: {}
            },
            layers: {
                baselayers: {
                    mapbox_light: {
                        name: 'Mapbox Light',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        type: 'xyz',
                        layerParams: {
                            showOnSelector: false
                        }
                    }
                },
                overlays: {
                    draw: {
                        name: 'draw',
                        type: 'group',
                        visible: true,
                        layerParams: {
                            showOnSelector: false
                        },
                    },
                    search: {
                        name: 'search',
                        type: 'group',
                        visible: true,
                        layerParams: {
                            showOnSelector: false
                        },
                        url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
                        jsonpParam: 'json_callback',
                        propertyName: 'display_name',
                        propertyLoc: ['lat','lon'],
                        markerLocation: true,
                        autoCollapse: true,
                        autoType: false,
                        minLength: 2
                    }
                }
            }
        });

Answer 1

Вы можете использовать этот скрипт для автоматического заполнения окна поиска

leafletData.getMap().then(function(map) {
  function searchByAjax(text, callResponse)//callback for 3rd party ajax requests
    {
        $.ajax({
            url: 'url to get auto complete list',   
            type: 'GET',
            data: {q: text},
            dataType: 'json',
            success: function(json) {
                //console.log('in'+json[0].lat);
                var data=new Array();
                $scope.leafletSearchData=json;
                if(json.length>0){
                    for(var i=0;i<json.length;i++){
                        data.push({"loc":[json[i].lat,json[i].lon], "title":json[i].title});
                    }
                }
                callResponse(data);
            }
        });
    }

    var searchControl=new L.Control.Search({callData: searchByAjax, text:'Search ..', markerLocation: true,zoom:16});
    searchControl.on('search_locationfound', function(e) {

    }).on('search_collapsed', function(e) {

    });
    map.addControl( searchControl );}