Openstreemapアプリケーションに統合されたときに検索ボックスが機能しない

Question

マップがレンダリングされる前に、次のコードを使用してOSMのプロパティを設定しています。検索ボックスは表示されますが、国名を入力すると候補が表示されません。

問題のスクリーンショットを添付見つけてください - enter image description here

私は、以下の機能を実装するために探しています - 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);}