现在我已经在var中命名了每个名称对象，但是地图仍然无法正常工作。
我想映射自定义图标，这些图标在json数据对象中由属性名称定义。我有多个图标。我写了这段代码，但是它不起作用，并且控制台显示错误在第266行，
“未捕获的TypeError：无法读取未定义的属性'createIcon'”但我无法找出错误。
var map = L.map('map').setView([50.922082,6.944733], 13);
var markerIcons = {
"REWE": L.icon({
iconUrl: 'rewe.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland": L.icon({
iconUrl: 'kaufland.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Netto Filiale": L.icon({
iconUrl: 'netto.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"REWE Rahmati": L.icon({
iconUrl: 'rewe.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Lidl": L.icon({
iconUrl: 'lidl.jpg',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"ALDI SÜD": L.icon({
iconUrl: 'aldi.jpg',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"PENNY": L.icon({
iconUrl: 'penny.jpg',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"dm-drogerie markt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Hit": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"HIT Handelsgruppe GmbH & Co. KG": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Hit getränkemarkt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Hit Markt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland Köln-Niehl": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland Köln-Ehrenfeld": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland Köln-Kalk": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland Köln-Mühlheim": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"NORMA Filiale": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"NORMA": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"real": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Wodarz Getränkemarkt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Center Engels Marsdorf GmbH": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Engels": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Peters": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Gans": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Daub KG": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Center Engels Widdersdorf": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Romano": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Wodarz": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Kausemann": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Weiden": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Hein": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Feldmann-Höner": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA - Die Kippings": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Blomeier": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Aktiv Markt Hetzenegger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA STEFFENS": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Jung": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Markt Hein": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Frischmarkt Zickuhr": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Stahl": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Klein": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Hetzenegger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA-Markt Frischecenter J. Engels GbR": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Geurtz": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Wünsch": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Hetzenegger Getränkemarkt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Klein Hessling": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Breuer": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Höner": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Schröder": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA FrischeCenter Gusek": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Zickuhr": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Köln-Merheim": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Klein-Heßling": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Mülln": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Bonus": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Breidohr-Frischecenter": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
};
for (var i = 0; i < jsonDataObject.length; i++) {
var lat = parseFloat(jsonDataObject[i].geometry.location.lat);
var lng = parseFloat(jsonDataObject[i].geometry.location.lng);
var marker = L.marker(L.latLng(lat, lng), {
icon: markerIcons[jsonDataObject[i].name]
});
marker.bindPopup(jsonDataObject[i].name, {
autoClose: false
});
map.addLayer(marker);
marker.myJsonData = jsonDataObject[i];
};
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
您会收到此错误，因为在您的jsonDataObject中只有名字Lidl，没有REWE和Netto Filiale。此外，在Lidl词典中没有markerIcons的对象。如果在markerIcons中包含Lidl的对象，则应该很好，并且不会出现错误。
<!DOCTYPE html>
<html>
<head>
<title>Angelkarte</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 700px; height: 640px"></div>
<script>
var jsonDataObject = [
{
"geometry": {
"location": {
"lat": 50.93756,
"lng": 6.947799799999999
},
"viewport": {
"northeast": {
"lat": 50.93890322989272,
"lng": 6.949169529892721
},
"southwest": {
"lat": 50.93620357010728,
"lng": 6.946469870107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "62cb1e6d0806ad07128377d901ee32310253a30b",
"name": "REWE",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 3096,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/101585085101168022315\"\u003eMomen Mawad\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAXm4APOhsx_uZaCqKYJaPIV3j4N8LacOOyJRbo4Ngic4a8d_wfvN2hpGdEq99Bb4a-GJ1zNYytXZJb31oZtb76UcCXlCqJz-_T8OUJIGU0QPrwtoxouUUNbpogqSCnCddEhDqABsG5Mqmf0PSSo-b_T2uGhTU6tkDpTmygG7CRvzKLaSm2W1K_Q",
"width": 4128
}],
"place_id": "ChIJfT5IYqklv0cRa8hjie38gBs",
"plus_code": {
"compound_code": "WWQX+24 Köln",
"global_code": "9F28WWQX+24"
},
"rating": 4,
"reference": "ChIJfT5IYqklv0cRa8hjie38gBs",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 718,
"vicinity": "Neumarkt 8-10, Köln"
},
{
"geometry": {
"location": {
"lat": 50.9896636,
"lng": 6.9450721
},
"viewport": {
"northeast": {
"lat": 50.99083827989272,
"lng": 6.945784879892721
},
"southwest": {
"lat": 50.98813862010728,
"lng": 6.943085220107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "15bde73489d3e661f76c6c8b057b857d15c33f5d",
"name": "Lidl",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 4160,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/109844980228758601627\"\u003eJakub Zeman\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAxWykfcdTATYDgX-RKiu2bJMZ_i1TDEKYRRZtLY7d7ra2LoPSq-lHbqYgj2Hm8rT2MtniHkb5LbjPsynSg_03hYxVvrU7y5HC0shGbjO-AkmChpTk4G0u0fm7Ryso_BUcEhC4p08zvEuFmcU5fOZvbCoKGhS1zKXZF6SF27Ly4u6ZWlmsd2VJ3Q",
"width": 3120
}],
"place_id": "ChIJI0M7-Jkvv0cRZafVWxoOywc",
"plus_code": {
"compound_code": "XWQW+V2 Köln",
"global_code": "9F28XWQW+V2"
},
"rating": 4.1,
"reference": "ChIJI0M7-Jkvv0cRZafVWxoOywc",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 450,
"vicinity": "Neusser Str. 774/776, Köln"
},
{
"geometry": {
"location": {
"lat": 50.9626901,
"lng": 7.0051027
},
"viewport": {
"northeast": {
"lat": 50.96417282989272,
"lng": 7.006365279892721
},
"southwest": {
"lat": 50.96147317010728,
"lng": 7.003665620107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "abb022726ecd83f2f41a4921b9969fdb92f78a48",
"name": "Lidl",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 1920,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/101798318233683502049\"\u003eSergei Baikin\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAJ4SqucpuL7ecaLXlipj7twdqC_KwTTYAF48n-2aMGzLTJGT1nphb_OM9h_A05nRob5R34sHNKNqtKBSoHeVTI5UlDf6cbHRswDv1UFldESl814keTyTXfWTlzlryyGxQEhApWglsPwfp3thXkYgHzAp2GhT9cZSOrbfKytiDWdGjM8y-hNhE1Q",
"width": 1080
}],
"place_id": "ChIJA5HPDgcmv0cR-QJ3JHPmld4",
"plus_code": {
"compound_code": "X274+32 Köln",
"global_code": "9F29X274+32"
},
"rating": 3.6,
"reference": "ChIJA5HPDgcmv0cR-QJ3JHPmld4",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 318,
"vicinity": "Wr. Pl. 1, Köln"
},
{
"geometry": {
"location": {
"lat": 50.97775619999999,
"lng": 7.0010123
},
"viewport": {
"northeast": {
"lat": 50.97912242989272,
"lng": 7.002976729892721
},
"southwest": {
"lat": 50.97642277010728,
"lng": 7.000277070107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "078117a10aefd0116715a6079cdb036f5ba41c57",
"name": "Netto Filiale",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 1280,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/111351800509443750507\"\u003eA Google User\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAoij8qIZHDfyMMua-UT_Xr4qIbNaEaeJg6ocxZMmLnbtvMBgSHwlnX_z0XXeugXfZRAlGer39I1chZiL10-iR_BIw86ciuNseeI7dzgubxljtcWHE8c-_4Nwk4hctxZFSEhAe5EKQCBGRRJbzGikqunuXGhT0Qox0e2htUVa_VhVgGvOrJWwr2w",
"width": 960
}],
"place_id": "ChIJXQ6kzFMvv0cRHnkGLzukbvw",
"plus_code": {
"compound_code": "X2H2+4C Köln",
"global_code": "9F29X2H2+4C"
},
"rating": 3.9,
"reference": "ChIJXQ6kzFMvv0cRHnkGLzukbvw",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 360,
"vicinity": "Düsseldorfer Str. 177, Köln"
}
];
var map = L.map('map').setView([50.922082, 6.944733], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var markerIcons = {
"REWE": L.icon({
iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Netto Filiale": L.icon({
iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Lidl": L.icon({
iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
};
for (let i = 0; i < jsonDataObject.length; i++) {
var lat = parseFloat(jsonDataObject[i].geometry.location.lat);
var lng = parseFloat(jsonDataObject[i].geometry.location.lng);
console.log(jsonDataObject[i].name)
var marker = L.marker([lat, lng], {
icon: markerIcons[jsonDataObject[i].name]
});
marker.bindPopup(jsonDataObject[i].name, {
autoClose: false
});
map.addLayer(marker);
marker.myJsonData = jsonDataObject[i];
};
</script>
</body>
</html>