Question

搜索后如何操作，放大地图上的值？我的代码是：

$("#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));
    } 
});

首先，我得到return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc，此回复，例如："1 - FORTALEZA" 之后，我使用select，哪里有param ui，何时ui.item.value返回"1 - FORTALEZA"，所以这个：

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是正在处理的features数组中的当前项，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功能制作更复杂的source: function(request, response){}。 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 }对。如果您愿意，也可以通过properties通过ui.item.properties访问所有"FORTALEZA"。

这也意味着您只传递"1 - FORTALEZA"而不是fitBounds(<LatLngBounds> bounds, <fitBounds options> options?)，如果它与地图数据中的标题匹配，则可能会混淆插件。

如果您提供了示例数据或jsFiddle，我会测试此解决方案。

<强>更新

做了一些阅读。我明白了：

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()); } });不会返回您想要的值。

注意

您已经选择了一个很好的答案，只是更新我的代码作为替代方案。

{{1}}

使用自动完成功能进行搜索后缩放

2 个答案: