leaflet Uncaught TypeError: map.addLayer is not a function
leaflet Uncaught TypeError: map.addLayer is not a function
我创建了一个函数,用于在地图上对我的 json 数据进行聚类,如下所示:
它位于一个名为 functions.js
的 js 文件中
function(ODO)
var markerClusters = L.markerClusterGroup();
for ( var i = 0; i < ODO.length ; i++ )
{
var popup = ODO[i].branchcode +
"<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 mainMap = L.marker( [ODO[i].LastX, ODO[i].LastY] )
.bindPopup( popup );
markerClusters.addLayer( mainMap );
}
mainMap.addLayer( markerClusters );
markerClusterLayer = L.markerClusterGroup({
disableClusteringAtZoom: 13
}).addTo(mainMap);
}
然后,在 app.js
中初始化具有不同图层和图例的地图:
function Init_Map()
{
var cities = L.layerGroup();
var mbAttr = 'Map data © <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: '© <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']});
window.mainMap = 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(mainMap);
L.Control.Consumption = L.Control.extend({
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)"></i><span>پر مصرف</span><br>';
return div;
},
onRemove: function(map) {}
});
L.control.consumption = function(opts) {
return new L.Control.Consumption(opts);
}
L.control.consumption({ position: 'bottomright' }).addTo(mainMap);
}
我正在像这样从服务器调用数据:
var OMID_Detail_Object;
function OMID_Detail() {
var Ajax_URL= Server_IP +'/OHM';
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();
}
当我遇到图例错误时,我将默认地图命名为 mainMap
。但是现在,聚类标记的函数有一个错误,如:
Uncaught TypeError: mainMap.addLayer is not a function
at MarkerOnMap (functions.js:46)
at Object.success (app.js:213)
at i (0:4002)
at XMLHttpRequest.Request.f.onload (0:4179)
并且正在谈论这部分的一个错误:
mainMap.addLayer( markerClusters );
但是为什么呢?我试着说
map.addLayer( markerClusters );
但它也没有用。有同样的错误!
有人可以帮忙吗?
到处使用window.mainMap
而不是mainMap
我创建了一个函数,用于在地图上对我的 json 数据进行聚类,如下所示:
它位于一个名为 functions.js
function(ODO)
var markerClusters = L.markerClusterGroup();
for ( var i = 0; i < ODO.length ; i++ )
{
var popup = ODO[i].branchcode +
"<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 mainMap = L.marker( [ODO[i].LastX, ODO[i].LastY] )
.bindPopup( popup );
markerClusters.addLayer( mainMap );
}
mainMap.addLayer( markerClusters );
markerClusterLayer = L.markerClusterGroup({
disableClusteringAtZoom: 13
}).addTo(mainMap);
}
然后,在 app.js
中初始化具有不同图层和图例的地图:
function Init_Map()
{
var cities = L.layerGroup();
var mbAttr = 'Map data © <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: '© <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']});
window.mainMap = 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(mainMap);
L.Control.Consumption = L.Control.extend({
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)"></i><span>پر مصرف</span><br>';
return div;
},
onRemove: function(map) {}
});
L.control.consumption = function(opts) {
return new L.Control.Consumption(opts);
}
L.control.consumption({ position: 'bottomright' }).addTo(mainMap);
}
我正在像这样从服务器调用数据:
var OMID_Detail_Object;
function OMID_Detail() {
var Ajax_URL= Server_IP +'/OHM';
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();
}
当我遇到图例错误时,我将默认地图命名为 mainMap
。但是现在,聚类标记的函数有一个错误,如:
Uncaught TypeError: mainMap.addLayer is not a function
at MarkerOnMap (functions.js:46)
at Object.success (app.js:213)
at i (0:4002)
at XMLHttpRequest.Request.f.onload (0:4179)
并且正在谈论这部分的一个错误:
mainMap.addLayer( markerClusters );
但是为什么呢?我试着说
map.addLayer( markerClusters );
但它也没有用。有同样的错误! 有人可以帮忙吗?
到处使用window.mainMap
而不是mainMap