Leaflet地图标记不显示及TypeError报错排查求助

Let's break down the issues causing your markers not to show up and the console error you're seeing:

1. Root Cause of the TypeError #

The error Uncaught (in promise) TypeError: Cannot read property 'data' of undefined (triggered at this.map.addLayer(this.markers);) stems from incorrect property access in your fillDataInMap method.

In your Vue instance, you’re storing core map objects (like map and markers) inside the $data object (e.g., this.$data.map, this.$data.markers). But in the problematic line, you’re trying to access this.map and this.markers directly—these aren’t top-level properties on the Vue instance, so they return undefined when called.

2. Hidden Typo Breaking Marker Icons #

You also have a subtle spelling error in the marker creation line that would prevent custom icons from loading, even if the map issue was fixed:

// Broken: typo in "iconlabel" (lowercase L)
let marker = L.marker(new L.LatLng(this.$data.properties[i].latitude, this.$data.properties[i].longitude), {icon: this.$data.iconlabel, id: i+1});

You set the icon variable as this.$data.iconLabel (capital L) earlier, so the typo here would make the icon reference invalid.

Step-by-Step Fixes #

Here’s how to resolve both issues:

Fix 1: Correct Map/Markers Property Access #

Update the problematic line in fillDataInMap to use the proper $data reference:

// Before (broken):
// this.map.addLayer(this.markers);

// After (fixed):
this.$data.map.addLayer(this.$data.markers);

Fix 2: Fix the Icon Label Typo #

Correct the variable name in the marker creation line:

// Before (broken):
// let marker = L.marker(new L.LatLng(this.$data.properties[i].latitude, this.$data.properties[i].longitude), {icon: this.$data.iconlabel, id: i+1});

// After (fixed):
let marker = L.marker(new L.LatLng(this.$data.properties[i].latitude, this.$data.properties[i].longitude), {icon: this.$data.iconLabel, id: i+1});

Optional: Simplify Property Access (Best Practice) #

To avoid future typos, destructure your $data object at the start of methods that use multiple data properties. For example, in fillDataInMap:

fillDataInMap(){
  // Destructure to avoid repeating "this.$data"
  const { properties, allPropertyLayer, markers, map } = this.$data;
  
  for(let i = 0; i < properties.length; i++){
    const currentProp = properties[i];
    const iconLabel = this.getPropertyIconLabelUnSelected(currentProp);
    const labelName = this.getPropertyLabelName(currentProp);
    
    let marker = L.marker(
      new L.LatLng(currentProp.latitude, currentProp.longitude), 
      {icon: iconLabel, id: i+1}
    );
    
    // ... rest of your marker event binding code ...
    
    allPropertyLayer.addLayer(marker);
    this.addMarkerToRespectiveLayer(currentProp.property_sub_type, marker);
  }
  
  markers.addLayer(allPropertyLayer);
  map.addLayer(markers);
}

This makes your code cleaner and reduces the chance of similar mistakes.

Verification #

After applying these fixes:

• The TypeError should disappear, as you’re now accessing valid map and markers instances from $data.
• Your markers should render on the map with the correct custom icons (assuming your getPropertyIconLabelUnSelected method returns valid Leaflet icons).

内容的提问来源于stack exchange，提问作者Abhishek Mishra