传单未捕获类型错误:无法读取未定义和标记群集的属性"长度" 未定义



我编写了一段代码,用于从服务器获取数据并将其显示在地图上。在我更改地图代码以添加LayerGroup()之前,它一直运行良好。我在一个名为app.js的单独文件中有我的映射函数,在functions.js中有聚类函数。我想使用不同类型的贴图(图层控制(。并且聚类功能应该在";在地图上显示";按钮。我现在的地图代码:

function Init_Map()
{
var cities = L.layerGroup();

var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var satellite   = L.tileLayer(mbUrl, {id: 'mapbox/satellite-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
streets  = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
Defaultmap = L.tileLayer('http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}&s=Ga', {
maxZoom: 19,
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'}),
googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']}),
googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']}),
googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']});
var map = L.map('map', {
center: [36.564012,53.060300],
zoom: 8,
layers: [satellite, cities, Defaultmap , googleHybrid , googleSat , googleTerrain]
});

var baseLayers = {
"نقشه ماهواره ای(گوگل)": googleSat,
"نقشه هیبریدی": googleHybrid,
"نقشه ماهواره ای(OSM)": satellite,
"Streets": streets,
"نقشه اصلی": Defaultmap,
"نقشه Terrain": googleTerrain
};

var overlays = {
"Cities": cities
};

L.control.layers(baseLayers, overlays).addTo(map);
}

以及我的功能:

function MarkerOnMap(ODO) {
for ( var i = 0; i < ODO.length ; i++ ){
console.log(ODO);
var popup = 
'<br/><b>کد رشته :</b> ' + ODO[i].branchcode +
'<br/><b>دوره:</b> ' + ODO[i].saleprd +
'<br/><b>سال :</b> ' + ODO[i].saleyear+
'<br/><b>موقعیت مکانی:</b> ' + ODO[i].LastX +""+"-"+""+ ODO[i].LastY +
'<br/><b>فلگ :</b> ' + ODO[i].flag ;

var marker= L.marker( [ODO[i].LastX, ODO[i].LastY] )
.bindPopup( popup );
markerClusters.addLayer( marker);
}
/*Legend specific*/
var legend = L.control({ position: "bottomright" });
legend.onAdd = function(map) {
var div = L.DomUtil.create("div", "legend");
div.innerHTML += "<h4>Tegnforklaring</h4>";
div.innerHTML += '<i style="background: rgba(110, 204, 57, 0.6)"></i><span>خوش مصرف</span><br>';
div.innerHTML += '<i style="background: rgba(240, 194, 12, 0.6)"></i><span>کم مصرف</span><br>';
div.innerHTML += '<i style="background: rgba(241, 128, 23, 0.6)#E6E696"></i><span>پر مصرف</span><br>';
return div;
};
legend.addTo(map);
Init_Map ();

}

并在这个集群中调用映射函数:

Init_Map ();

有人能告诉我为什么我突然收到这个错误吗?

ODO中的数据是这样的:

var BillingDate = [
{"branchcode":"668",
"saleyear":"99",
"saleprd":"3",
"LastX":"36.649717",
"LastY":"52.488193",
"flag":"1",
"flag_Title":null
},
{
"branchcode":"669",
"saleyear":"99",
"saleprd":"3",
"LastX":"36.712585",
"LastY":"52.935543",
"flag":"1",
"flag_Title":null
}
];

它可以从服务器上读取,并在我将地图代码更改为现在的样子之前向我显示集群标记。地图的旧代码是:

var map = L.map('map').setView( [36.564012,53.060300], 8);
// add the OpenStreetMap tiles
L.tileLayer('http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}&s=Ga', {
maxZoom: 19,
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);

在app.js中,我有另一个函数从服务器接收数据并将其传递给MarkerOnMap();:

var OMID_Detail_Object;
function OMID_Detail() {
var Ajax_URL= Server_IP +'/OHM/Get_Billing_OMID_Detail';
var Year_Val = GetSelectValue("YearSelect");
var Prd_Val = GetSelectValue("PrdSelect");
var Flg_Val = GetSelectValue("flags");

app.request.get(Ajax_URL, { "Token": Token_Data, "SaleYear":Year_Val, "SalePrd":Prd_Val, "Flag":Flg_Val }, function (data)
{
OMID_Detail_Object=data;
},function (er){},"json");
}
function CreateMarkers(){
OMID_Detail();
MarkerOnMap(OMID_Detail_Object);
}

数据ODO被清楚地读取。我用console.log 检查过

var OMID_Detail_Object;
function OMID_Detail() {
var Ajax_URL= Server_IP +'/OHM/Get_Billing_OMID_Detail';
var Year_Val = GetSelectValue("YearSelect");
var Prd_Val = GetSelectValue("PrdSelect");
var Flg_Val = GetSelectValue("flags");

app.request.get(Ajax_URL, { "Token": Token_Data, "SaleYear":Year_Val, "SalePrd":Prd_Val, "Flag":Flg_Val }, function (data)
{
OMID_Detail_Object=data;
MarkerOnMap(OMID_Detail_Object);
},function (er){},"json");
}
function CreateMarkers(){
OMID_Detail();
}

以上是经过轻微修改的代码,另一种方法是使用异步等待最终目的是让MarkerOnMap函数等待上一个函数完全执行。

最新更新