javascript - 未捕获的类型错误 : Cannot read property 'createIcon' of undefined when creating markers

Question

现在我已经命名了 var 中的每个名称对象，但 map 仍然无法工作。

我想映射自定义图标，这些图标是通过属性名称在 json 数据对象中定义的。我有多个图标。我编写了这段代码，但它不起作用，我的控制台显示错误位于第 266 行，

"Uncaught TypeError: Cannot read property 'createIcon' of undefined" but I can't figure out the error.

    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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Answer 1

您收到此错误是因为在您的 jsonDataObject 中，您只有名称 Lidl 而不是 REWE 和 Netto Filiale >。此外，您的 markerIcons 字典中没有 Lidl 的对象。如果您在 markerIcons 中包含 Lidl 的对象，您应该不会收到错误。

 <!DOCTYPE html>
 <html>

   <head>
     <title>Angelkarte</title>
     <meta charset="utf-8" />

     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />

     <script src="https://unpkg.com/leaflet@1.6.0/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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
       }).addTo(map);

       var markerIcons = {
         "REWE": L.icon({
           iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon-2x.png',
           iconSize: [38, 95],
           iconAnchor: [22, 94],
           popupAnchor: [-3, -76],
         }),
         "Netto Filiale": L.icon({
           iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon-2x.png',
           iconSize: [38, 95],
           iconAnchor: [22, 94],
           popupAnchor: [-3, -76],
         }),
          "Lidl": L.icon({
           iconUrl: 'https://unpkg.com/leaflet@1.6.0/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>