자동 완성을 사용하여 검색 후 확대/축소

Question

검색 한 후지도에서 찾은 값을 확대하는 방법? 이 ui.item.value 반환 "1 - FORTALEZA"을 할 때 PARAM UI를 한 후 "1 - FORTALEZA" , 내가 선택 사용하므로 :

map.fitBounds(stComerciaisLayer.getBounds(ui.item.value)); 

, 내가 return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc 얻을,이 예에 대한 보답으로,

$("#txtSearch").autocomplete({ 
    source: setoresComerciais.features.map(function(d){ 
     return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc 
    }), 
    select: function(event, ui){ 
     map.fitBounds(stComerciaisLayer.getBounds(ui.item.value)); 
    } 
}); 

첫째 : 내 코드입니다

stComerciaisLayer = L.geoJSON(setoresComerciais, { 
       style: function (feature) { 
        return feature.properties && feature.properties.style; 
       }, 
       onEachFeature: onEachFeature, 
(...) 

그것은 내가 원하는 정확히 반환했다, 검색 및 줌에서의 결과 :

하지만 작동하지 않습니다. 나는 무엇을 잘못 했는가?

Answer 1

이 줄 : 의도 한대로

map.fitBounds(stComerciaisLayer.getBounds(ui.item.value)); 

이 작동하지 않습니다. API 문서에서 getBounds()는 인수를 취하지 않으며, 작업중인 레이어의 경계를 반환합니다. 레이어에 모든 geojson이 포함되어 있기 때문에 작동하지 않습니다.

geojson FeatureCollection에서 선택한 피쳐의 geojson을 가져올 수 있습니다. 그러면 해당 피쳐의 경계를 찾고 이에 따라지도를 업데이트 할 수있는 레이어를 만듭니다 (우리는 맵에 추가 할 필요가 없습니다). .

geojson에서 적절한 기능을 얻으려면 어떻게해야합니까? 사전을 사용하거나 자동 완성 함수 소스에 데이터를 추가 할 수있는 방법이 있습니다 (다른 답변에서 제안 된 것처럼). 내가) (다른 대답에 리드를 수행하지만 기능의 증가를 사용하고 .MAP 계속 사용할 수 있습니다 : 여기

source: setoresComerciais.features.map(function(d,i){ 
    return { 
     label: d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc, 
     id: i 
    }; 

을 .MAP 두 개의 변수를 취합니다 d이 기능 배열에서 현재 항목입니다 처리되고 있으며 i은 해당 지형지 물의 색인입니다. 인덱스, 우리는 쉽게 기능을 배열에 적절한 항목에 액세스 할 수 있습니다 그것의 레이어를 만들고, 해당 기능의 레이어에지도 경계에 맞게 : 전부

select: function(event, ui){ 
    var feature = setoresComerciais.features[ui.item.id]; // get the geojson 
    var featureLayer = L.geoJSON(feature) // create a layer from it 
    map.fitBounds(featureLayer.getBounds()); // resize the map 
} 

, 우리에게 제공합니다

$("#txtSearch").autocomplete({ 
     source: setoresComerciais.features.map(function(d,i){ 
      return {label: d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc, id: i }; 
     }), 
     select: function(event, ui){ 
      var feature = setoresComerciais.features[ui.item.id]; 
      var featureLayer = L.geoJSON(feature) 
      map.fitBounds(featureLayer.getBounds()); 
     } 
    }); 

을

Answer 2

이 플러그인을 사용하지는 않았지만 어쨌든 찌르는 것입니다.

나는 source: function(request, response){} 기능을 사용하여 더 복잡한 source을 만들 것을 권장합니다. See more.

$("#txtSearch").autocomplete({ 
    source: function(req, resp){ 
    var results = []; 
    $.each(setoresComerciais.features.properties, function(k, p){ 
     if(p.sco_dsc_loc.toLowerCase().indexOf(req.term.toLowerCase()) == 0){ 
     results.push({ 
      label: p.sco_num_sc + " - " + p.sco_dsc_loc, 
      value: p.sco_dsc_loc, 
      properties: p 
     }); 
     } 
    }); 
    resp(results); 
    }, 
    select: function(event, ui){ 
    map.fitBounds(stComerciaisLayer.getBounds(ui.item.value)); 
    return false; 
    } 
}); 

이렇게하면 잠재적 인 결과마다 { label, value } 쌍이 있어야합니다. 원하는 경우 ui.item.properties을 통해 properties에 액세스 할 수도 있습니다.

"1 - FORTALEZA"이 아니라 "FORTALEZA"이 아니라면지도 데이터의 제목과 일치하는 플러그인을 혼란시킬 수 있습니다.

예제 데이터 또는 jsFiddle을 제공 한 경우이 솔루션을 테스트했을 것입니다.

---

업데이트

좀 더 읽기를했다. 나는 참조 :

fitBounds(<LatLngBounds> bounds, <fitBounds options> options?)

가능한 최대 줌 레벨에 주어진 지리적 경계를 포함하는지도보기를 설정합니다. 나에게

map.fitBounds([ 
    [40.712, -74.227], 
    [40.774, -74.125] 
]); 

, 함수가 문자열 대 배열을 기대하고 나타납니다. 이것은 .getBounds()에 의해 반환되는 것입니다. 그러나 내가 읽은 어떤 것도 .getBounds()은 입력을 허용하지 않는다고 조언합니다. 그래서 나는 stComerciaisLayer.getBounds(ui.item.value)이 당신이 원하는 값을 리턴 할 것이라고 생각하지 않는다.

---

참고

당신은 좋은 대답을 선택, 그냥 대안으로 내 코드를 업데이트했습니다.

$("#txtSearch").autocomplete({ 
    source: function(req, resp){ 
    var results = []; 
    $.each(setoresComerciais.features, function(k, f){ 
     var props = f.properties; 
     if(props.sco_dsc_loc.toLowerCase().indexOf(req.term.toLowerCase()) == 0){ 
     results.push({ 
      label: props.sco_num_sc + " - " + props.sco_dsc_loc, 
      value: props.sco_dsc_loc, 
      properties: props, 
      id: k 
     }); 
     } 
    }); 
    resp(results); 
    }, 
    select: function(event, ui){ 
    var feature = setoresComerciais.features[ui.item.id]; 
    var featureLayer = L.geoJSON(feature) 
    map.fitBounds(featureLayer.getBounds()); 
    } 
});