Openstreemap Le champ de recherche ne fonctionne pas lorsqu'il est intégré dans l'application

Question

J'utilise le code suivant pour définir les propriétés d'OSM avant le rendu de la carte. Bien que le champ de recherche apparaisse, je ne peux pas voir les suggestions lorsque je tape le nom d'un pays.

S'il vous plaît trouver ci-joint une capture d'écran du problème - enter image description here

Je cherche à mettre en œuvre les fonctionnalités suivantes - 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

Vous pouvez utiliser ce script pour obtenir automatiquement la boîte de recherche complète

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);}