Javascript 使用带有$GetJson函数的传单搜索插件
我想让我的传单搜索插件为地图上附加的外部.json文件工作 为了向您阐明我想要实现的目标,我将为您提供两个代码示例: 1-来自脱机文件,附带geoJSON js文件 2-来自localhost,其中.json文件已由$GetJson函数获取 第一个代码如下所示:Javascript 使用带有$GetJson函数的传单搜索插件,javascript,json,leaflet,Javascript,Json,Leaflet,我想让我的传单搜索插件为地图上附加的外部.json文件工作 为了向您阐明我想要实现的目标,我将为您提供两个代码示例: 1-来自脱机文件,附带geoJSON js文件 2-来自localhost,其中.json文件已由$GetJson函数获取 第一个代码如下所示: var sitis = L.geoJSON(sitec, { pointToLayer: function (feature, latlng) { feature.properties.myKey = feature.propertie
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);
// 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
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
但是在第二段代码中有一个问题
我的初始数据如下所示:
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);
// 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
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
})
.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
我真的不知道发生了什么。
老实说,我找到了解决方案,它可以获取.json bvia Ajax和JQuery
但我已经通过$GetJSON函数从.json获取了数据
此处提供了另一个选项:
但一旦我将其实现到我的代码中,比如:
var searchControl = new L.Control.Search({
layer: job,
propertyName: 'Owner',
circleLocation: false
}))
我只有一个放大镜,但找不到
我的控制台说:
leaflet-search.js:774 Uncaught TypeError: Cannot read property 'call' of
undefined
at i._fillRecordsCache (leaflet-search.js:774)
at leaflet-search.js:720
我指的是:
传单-search.js 774
this._curReq = this._retrieveData.call(this, inputText, function(data) {
即使我从函数(e)
更改为[![function(data)][1]][1]
结果仍然相同
是否可以通过$getJSON函数使传单搜索控制台对外部.json文件有效?解决方案之一是将
L.search.Control
放在$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);
// 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
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
var url1=“Peterborough.json”/。json文件,从中获取数据
var作业//为我们的层设置变量
$.getJSON(url1,函数(数据){
job=L.geoJson(数据{
pointToLayer:功能(特性、latlng){
返回L.circleMarker(车床{
半径:6,
不透明度:.5,
//颜色:“000”,
颜色:getColor(feature.properties.League),
fillColor:getColor(feature.properties.League),
填充不透明度:0.8
});//.bindTooltip(feature.properties.Name);
},
onEachFeature:功能(功能,图层){
图层。\u传单\u id=feature.properties.Owner;
var popupContent=“The”+
feature.properties.Owner+“在此处播放,它们位于”+
feature.properties.League+“”+
“”;
if(feature.properties&&feature.properties.popupContent){
popupContent+=feature.properties.popupContent;
}
layer.bindPopup(弹出内容);
}
}).addData(data).addTo(map);//将从.json文件获取的层添加到映射
//---------------在$GetJSON函数中添加传单搜索插件----------
L.control.search({
层:作业,
首字母:false,
propertyName:'所有者',//指定搜索哪个属性。
缩放:18,
位置:'左上'
}).addTo(地图);
}); // $此层的GetJSON函数封装
解决方案之一是将L.Search.Control
放在$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);
// 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
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
var url1=“Peterborough.json”/。json文件,从中获取数据
var作业//为我们的层设置变量
$.getJSON(url1,函数(数据){
job=L.geoJson(数据{
pointToLayer:功能(特性、latlng){
返回L.circleMarker(车床{
半径:6,
不透明度:.5,
//颜色:“000”,
颜色:getColor(feature.properties.League),
fillColor:getColor(feature.properties.League),
填充不透明度:0.8
});//.bindTooltip(feature.properties.Name);
},
onEachFeature:功能(功能,图层){
图层。\u传单\u id=feature.properties.Owner;
var popupContent=“The”+
feature.properties.Owner+“在此处播放,它们位于”+
feature.properties.League+“”+
“”;
if(feature.properties&&feature.properties.popupContent){
popupContent+=feature.properties.popupContent;
}
layer.bindPopup(弹出内容);
}
}).addData(data).addTo(map);//将从.json文件获取的层添加到映射
//---------------在$GetJSON函数中添加传单搜索插件----------
L.control.search({
层:作业,
首字母:false,
propertyName:'所有者',//指定搜索哪个属性。
缩放:18,
位置:'左上'
}).addTo(地图);
}); // $此层的GetJSON函数封装