Openstreemap Suchfeld funktioniert nicht, wenn es in die Anwendung integriert ist

Question

Ich verwende den folgenden Code, um Eigenschaften von OSM vor dem Rendern der Karte festzulegen. Obwohl das Suchfeld angezeigt wird, kann ich keine Vorschläge anzeigen, wenn ich den Namen eines Landes eintippe.

Anbei erhalten Sie einen Screenshot des Problems - enter image description here

Ich suche die folgende Funktionalität zu implementieren - 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

Sie dieses Skript verwenden können Auto-Vervollständigen-Suchfeld

zu bekommen

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