使用传单搜索插件$GetJson函数

Question

我想有我的传单搜索插件工作的外部. json文件附加到地图。

为了澄清我想要实现的目标，我将为您提供两个代码示例：

1-来自脱机文件，附加了GeoJSON js文件2-来自localhost，其中. json文件已由$GetJson函数获取

第一个代码看起来像这样：

var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head
    return L.circleMarker(latlng, geojsonMarkerOptions);
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> Website:"+feature.properties.URL+"</p><br><center><a href='file:///Z:\\Fixed Line\\Design & Build\\2. Clients\\Openreach\\3. MDU Designs\\Coventry\\OR66 - Priory Court, Coventry\\20190709_121215019_iOS%20(1).jpg' target='blank'><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'></a>");
}

    }).addTo(map);

而传单搜索的效果非常好

L.control.search({
layer: L.layerGroup ([sitis, church]),
initial: false,
propertyName: 'myKey', // Specify which property is searched into.
zoom: 14,
position: 'topleft'
  })
    .addTo(map);

L.control.scale({
position: 'bottomright',
   })
   .addTo(map);

但在第二段代码中有一个问题。

我的初始数据如下所示：

// layer 1
  $.getJSON(url1, function(data) {

    job = L.geoJson(data, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor(feature.properties.League),
            fillColor:  getColor(feature.properties.League),
            fillOpacity: 0.8

            });  //.bindTooltip(feature.properties.Name);
        },

            onEachFeature: function (feature, layer) {
                layer._leaflet_id = feature.properties.Owner;


                var popupContent = "<p>The <b>" +
                feature.properties.Owner + "</b> play here,</br> They are in the " +
                feature.properties.League + "</br>" +
                '<a href="'+ feature.properties.Website +'" target="_blank">Website</a></p>' ;

                if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
                    layer.bindPopup(popupContent);

            }

            }).addTo(map);
    });
//END Layer1

我申请的地方：

L.control.search({
layer: L.layerGroup ([job, job2, job3]),
initial: false,
propertyName: 'Owner', // Specify which property is searched into.
zoom: 18,
position: 'bottomright'

}）. addTo（地图）；

但没有结果。我的控制台显示：

 Uncaught TypeError: Cannot read property '_leaflet_id' of undefined
at u (leaflet.js:5)
at i.getLayerId (leaflet.js:5)
at i.addLayer (leaflet.js:5)
at initialize (leaflet.js:5)
at new i (leaflet.js:5)
at Object.t.layerGroup (leaflet.js:5)
at (index):659

我真的不知道发生了什么。老实说，我找到了解决方案，它可以获取the.jsonbvia Ajax和JQuery...

https://medium.com/@maptastik/loading-external-geojson-a-other-way-to-do-it-with-jquery-c72ae3b41c01

但是我已经通过$GetJSON函数从. json获取了数据。

此处提供了另一个选项：

https://jsfiddle.net/expedio/7e8b6gyu/

但是一旦我把它实现到我的代码中，比如：

var searchControl = new L.Control.Search({
layer: job,
propertyName: 'Owner',
circleLocation: false

});

searchControl.on('search_locationfound', function (e) {

data.layer.setStyle({
    fillColor: '#3f0',
    color: '#0f0'
});
if (data.layer._popup) data.layer.openPopup();

}).on('search_collapsed', function (e) {

statesLayer.eachLayer(function (layer) { //restore feature color
    statesLayer.resetStyle(layer);
});
});

map.addControl(searchControl); //inizialize search control

我只有一个放大镜，但找不到。

我的控制台接着说：

leaflet-search.js:774 Uncaught TypeError: Cannot read property 'call' of 
undefined
at i._fillRecordsCache (leaflet-search.js:774)
at leaflet-search.js:720

我指的是：

leaflet-search.js774

 this._curReq = this._retrieveData.call(this, inputText, function(data) {

即使当我从函数（e）更改为[！[function（data）][1][1]时，结果仍然是一样的。。。

是否可以使传单搜索控制台对外部用户有效。通过$getJSON函数创建json文件？

Answer 1

解决方案之一是放置L.Search。控件$GetJSON函数中的，该函数在主脚本中看起来像一个单独的“主体”。就解决方案而言，代码应该如下所示：

var url1 = "Peterborough.json"; //.json file, where we fetch the data from
var job; //setting variable for our layer

$.getJSON(url1, function(data) {
job = L.geoJson(data, {

    pointToLayer: function(feature, latlng) {

        return L.circleMarker(latlng, {
        radius:6,
        opacity: .5,
        //color: "#000",
        color:getColor(feature.properties.League),
        fillColor:  getColor(feature.properties.League),
        fillOpacity: 0.8

        });  //.bindTooltip(feature.properties.Name);
    },

        onEachFeature: function (feature, layer) {
            layer._leaflet_id = feature.properties.Owner;


            var popupContent = "<p>The <b>" +
            feature.properties.Owner + "</b> play here,</br> They are in the " +
            feature.properties.League + "</br>" +
            '<a href="'+ feature.properties.Directory +'" target="_blank">Local 
 directory</a></p>' ;

            if (feature.properties && feature.properties.popupContent) {
                popupContent += feature.properties.popupContent;
            }
                layer.bindPopup(popupContent);

        }

        }).addData(data).addTo(map); // adding the layer fetched from .json file to the map
        //---------------adding the leaflet-search plugin inside the $GetJSON function ----------
        L.control.search({
layer: job,
initial: false,
propertyName: 'Owner', // Specify which property is searched into.
zoom: 18,
position: 'topleft'
  }).addTo(map);

}); // $GetJSON function enclosure for this layer