Javascript 传单图例地图未定义
我一直在尝试在我的传单地图上添加一个图例。我知道我应该很简单，我已经试过很多次了。然而，我无法让传奇人物出现 当我在其他项目中复制/粘贴图例片段时，我确实会在屏幕上看到图例 我将Firebug与我的传单地图一起运行，以了解问题所在： 正如你在上面看到的，“地图”是未定义的。只有将Javascript 传单图例地图未定义,javascript,leaflet,Javascript,Leaflet,我一直在尝试在我的传单地图上添加一个图例。我知道我应该很简单，我已经试过很多次了。然而，我无法让传奇人物出现 当我在其他项目中复制/粘贴图例片段时，我确实会在屏幕上看到图例 我将Firebug与我的传单地图一起运行，以了解问题所在： 正如你在上面看到的，“地图”是未定义的。只有将legend.addTo（map）添加到代码中时，才会出现这种情况。如果我删除了这个代码段，整个代码就可以完美地运行，并且不会再出现“map”错误（即使我仍然在多个地方使用变量“map”） 似乎传单.src.js文件有
legend.addTo（map） // globale variabelen
var map,
tab1,
fields = ["id", "x", "y", "keten", "name"],
autocomplete = [];
$(document).ready(initialize);
function initialize(){
$("#map").height($(window).height());
map = L.map("map", {
center: L.latLng(53.21587, 6.556676 ),
zoom: 12
});
var tileLayer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
getData();
};
function getColor(keten) {
return keten == "MacDonalds" ? '#800888' :
keten == "Subway" ? '#969696' :
keten == "KFC" ? '#081d58' :
keten == "BurgerKing" ? '#006837' :
keten == "Dominos" ? '#fed976' :
keten == "NYPizza" ? '#fed976' :
'#252525' ;
}
function getData(){
$.ajax("php/getData.php", {
data: {
table: "fastfood_groningen",
fields: fields
},
success: function(data){
mapData(data);
}
})
};
map.eachLayer(function(layer){
//if niet de tile layer
if (typeof layer._url === "undefined"){
map.removeLayer(layer);
}
});
// Aanmaken van een geojson container object
var geojson = {
"type": "FeatureCollection",
"features": []
};
var dataArray = data.split(", ;");
dataArray.pop();
console.log(dataArray);
dataArray.forEach(function(d){
d = d.split(", ");
var feature = {
"type": "Feature",
"properties": {}, //properties object container
"geometry": JSON.parse(d[fields.length]) //parse geometry
};
// Hiermee definieer je de lengte van 1 feature die in dit geval gelijk is aan de lengte van velden.
for (var i=0; i<fields.length; i++){
feature.properties[fields[i]] = d[i];
};
// De feature namen worden toegevoegd waarna de list wordt ge-autocomplete
if ($.inArray(feature.properties.keten, autocomplete) == -1){
autocomplete.push(feature.properties.keten);
};
geojson.features.push(feature);
});
console.log(geojson);
//activatie van de autocomplete on keten input
$("input[name=keten]").autocomplete({
source: autocomplete
});
window["mapDataLayer"] = L.geoJson(geojson, {
pointToLayer: function (feature, latlng) {
var markerStyle = {
fillColor: getColor(feature.properties.keten),
color: "#FFF",
fillOpacity: 0.5,
opacity: 0.8,
weight: 1,
radius: 8
};
return L.circleMarker(latlng, markerStyle);
},
onEachFeature: function (feature, layer) {
var html = "";
for (prop in feature.properties){
html += prop+": "+feature.properties[prop]+"<br>";
};
layer.bindPopup(html);
}
}).addTo(map);
};
// Custom layerpanel --WORK IN PROGRESS!
$( "input[value=mapDataLayer]" ).click(function( event ) {
layerClicked = window[event.target.value];
if (map.hasLayer(layerClicked)) {
map.removeLayer(layerClicked);
}
else{
map.addLayer(layerClicked);
} ;
});
function submitQuery(){
//Haal de data van het formulier op
var formdata = $("form").serializeArray();
var data = {
table: "fastfood_groningen",
fields: fields
};
formdata.forEach(function(dataobj){
data[dataobj.name] = dataobj.value;
});
$.ajax("php/getData.php", {
data: data,
success: function(data){
mapData(data);
}
})
};
;
//legend controls and info
var legend = new L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0.00001, 0.7300001, 2.9900001, 6.700001],
labels = ['Legend (Value = CO2 per Capita)'],
from, to;
labels.push('<i style="background: #eeedd8"></i> ' + 'No Data Available');
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push('<i style="background:' + getColor(from + '1' ) + '"></i> ' + from + (to ? '–' + to : '–43.893036'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
//globale variabelen
var映射，
表1，
字段=[“id”、“x”、“y”、“keten”、“name”]，
自动完成=[]；
$（文档）.ready（初始化）；
函数初始化（）{
$（“#map”）.height（$（window.height（））；
map=L.map（“map”{
中心：L.latLng（53.21587,6.556676），
缩放：12
});
var tileLayer=L.tileLayer（“http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”）.addTo（map）；
getData（）；
};
函数getColor（keten）{
return keten==“MacDonalds”？“#800888”：
凯顿==“地铁”？#9696'：
凯顿==“肯德基”？#081d58'：
keten==“汉堡王”？#006837':
凯顿==“多米诺骨牌”？“#1976年2月”：
keten==“NYPIZA”？“#1976年2月”：
'#252525' ;
}
函数getData（）{
$.ajax（“php/getData.php”{
数据：{
表：“groningen快餐店”，
字段：字段
},
成功：功能（数据）{
地图数据（数据）；
}
})
};
map.eachLayer（函数（层）{
//如果粘瓦层
如果（图层类型。\u url==“未定义”）{
map.removeLayer（层）；
}
});
//Aanmaken van een geojson容器对象
var geojson={
“类型”：“FeatureCollection”，
“功能”：[]
};
var dataArray=data.split（“，；”）；
dataArray.pop（）；
log（数据数组）；
dataArray.forEach（函数（d）{
d=d.拆分（“，”）；
变量特征={
“类型”：“功能”，
“属性”：{}，//属性对象容器
“geometry”：JSON.parse（d[fields.length]）//解析几何体
};
//在dit geval gelijk中，Hiermee Defineer je de lengte van 1特征模具是一个长型van velden。
for（var i=0；i出于某种原因legend.addTo（map）
运行得很早，尽管它是我代码的最后一行
在运行legend.addTo（map）
之前，我使用以下代码检查某个函数（初始化）是否已完成：
$.when($.ajax(initialize())).then(function () {
legend.addTo(map);
});
正确缩进你的代码-你会看到你在调用legent.addTo（map）
之前调用了initialize（）
。谢谢你的回复，伊万，但我不明白你的意思。legend.addTo（map）在我的代码底部（就像我所做的大部分教程一样），我没有看到initialize（）在它之前被调用。你能解释一下你的意思吗？把一个console.log（）
放在initialize（）
里面，另一个console.log（）
放在legend.addTo（map）
和indent.your.code.旁边。我已经添加了console.log（）对于您所说的区域，不幸的是，我根本没有进步。我仍然会得到与以前相同的“map”错误。初始化（）中的console.log（）返回第27行，而legend.addTo（map）旁边的console.log（）完全不返回任何内容。注释掉legend.addTo（map）
并在console.log（）中使用performance.now（）
s以查看哪个先运行。