Javascript 未捕获类型错误：无法读取属性'_单张"id"'；未定义的VUEJ和传单_Javascript_Vue.js_Leaflet

Javascript 未捕获类型错误：无法读取属性'_单张"id"'；未定义的VUEJ和传单

javascript vue.js leaflet

Javascript 未捕获类型错误：无法读取属性'_单张"id"'；未定义的VUEJ和传单,javascript,vue.js,leaflet,Javascript,Vue.js,Leaflet,我正在制作一个vue项目，我想在我的组件中使用传单。我得到了地图显示，我可以添加标记，但我遇到了一个错误，当我试图删除一个标记。我明白了未捕获的TypeError:无法读取未定义的属性“\u传单\u id” 北区（传单编号：5）在e.removeLayer（传单js:5）在HTMLInputElement.eval（VM119323 App.vue:74）在HTMLInputElement.dispatch（jquery.js:3058）在HTMLInputElement.eventH

我正在制作一个vue项目，我想在我的组件中使用传单。我得到了地图显示，我可以添加标记，但我遇到了一个错误，当我试图删除一个标记。我明白了

未捕获的TypeError:无法读取未定义的属性“\u传单\u id” 北区（传单编号：5）在e.removeLayer（传单js:5）在HTMLInputElement.eval（VM119323 App.vue:74）在HTMLInputElement.dispatch（jquery.js:3058）在HTMLInputElement.eventHandle（jquery.js:2676）上


导出默认值{
名称：“应用程序”，
数据（）{
返回{
map:null，
标记：[]，
mapSW:[04096]，
mapNE:[4096,0]，
tileLayer:空
};
},
安装的（）{
this.initMap（）；
这个.initLayers（）；
this.onClick（）；
this.onPopupOpen（）；
},
计算：{
popupContent:function（）{
返回“
”；
}
},
方法：{
initMap（）{
this.map=L.map（“map”）.setView（[0,0]，1）；
this.tillelayer=L.tillelayer（“/static/map/{z}/{x}/{y}.png”{
最大缩放：4，
minZoom:3，
连续世界：错误，
诺拉普：没错，
crs:L.crs.Simple
});
this.tillelayer.addTo（this.map）；
this.map.on（“单击”，this.onClick，this）；
this.map.setMaxBounds(
L.LatLngBounds（L.latLng（this.mapSW），L.latLng（this.mapNW））
);
},
initLayers（）{}，
onClick（e）{
var NEWMERKER=L.标记器（如latlng、{
德拉格布尔：是的
})
.addTo（此.map）
.bindPopup（此.popupContent）；
这个.markers.push（newMarker）；
newMarker.on（“popupopen”，this.onPopupOpen，this）；
},
onPopupOpen（索引）{
$（“.标记删除按钮：可见”）。单击（（）=>{
this.map.removeLayer（this.newMarker）；
});
}
}
};

变量的范围应属于组件，以便您以后能够删除它。现在它只存在于

onClick

方法中。您可以阅读有关变量作用域的更多信息。为了解决您的问题，您需要将

newMarker

添加到

data（）

函数中：

// ...
data() {
  return {
    // ...
    tileLayer: null,
    newMarker: null
  };
},
// ...
onClick(e) {
  this.newMarker = L
    .marker(e.latlng, { draggable: true })
    .addTo(this.map)
    .bindPopup(this.popupContent);

  this.markers.push(this.newMarker);

  this.newMarker.on("popupopen", this.onPopupOpen, this);
},

onPopupOpen(index) {
  $(".marker-delete-button:visible").click(() => {
    this.map.removeLayer(this.newMarker);
  });
}

完整的代码如下所示：

<template>
  <div id="app" class="container-fluid">
    <div class="row">
      <div class="col-md-9">
        <div id="map" class="map" style="height: 781px;"></div>
      </div>
      <div class="col-md-3">

      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      map: null,
      markers: [],
      mapSW: [0, 4096],
      mapNE: [4096, 0],
      tileLayer: null,
      newMarker: null
    };
  },

  mounted() {
    this.initMap();
    this.initLayers();
    this.onClick();
    this.onPopupOpen();
  },

  computed: {
    popupContent: function() {
      return "<input type='button' value='Delete' class='marker-delete-button' /> <br> <input type='button' value='Add Event' class='add-event'/>";
    }
  },

  methods: {
    initMap() {
      this.map = L.map("map").setView([0, 0], 1);
      this.tileLayer = L.tileLayer("/static/map/{z}/{x}/{y}.png", {
        maxZoom: 4,
        minZoom: 3,
        continuousWorld: false,
        noWrap: true,
        crs: L.CRS.Simple
      });
      this.tileLayer.addTo(this.map);

      this.map.on("click", this.onClick, this);

      this.map.setMaxBounds(
        L.LatLngBounds(L.latLng(this.mapSW), L.latLng(this.mapNW))
      );
    },

    initLayers() {},

    onClick(e) {
      this.newMarker = L
        .marker(e.latlng, { draggable: true })
        .addTo(this.map)
        .bindPopup(this.popupContent);

      this.markers.push(this.newMarker);

      this.newMarker.on("popupopen", this.onPopupOpen, this);
    },

    onPopupOpen(index) {
      $(".marker-delete-button:visible").click(() => {
        this.map.removeLayer(this.newMarker);
      });
    }
  }
};
</script>


导出默认值{
名称：“应用程序”，
数据（）{
返回{
map:null，
标记：[]，
mapSW:[04096]，
mapNE:[4096,0]，
tileLayer:null，
newMarker:null
};
},
安装的（）{
this.initMap（）；
这个.initLayers（）；
this.onClick（）；
this.onPopupOpen（）；
},
计算：{
popupContent:function（）{
返回“
”；
}
},
方法：{
initMap（）{
this.map=L.map（“map”）.setView（[0,0]，1）；
this.tillelayer=L.tillelayer（“/static/map/{z}/{x}/{y}.png”{
最大缩放：4，
minZoom:3，
连续世界：错误，
诺拉普：没错，
crs:L.crs.Simple
});
this.tillelayer.addTo（this.map）；
this.map.on（“单击”，this.onClick，this）；
this.map.setMaxBounds(
L.LatLngBounds（L.latLng（this.mapSW），L.latLng（this.mapNW））
);
},
initLayers（）{}，
onClick（e）{
this.newMarker=L
.marker（e.latlng，{draggable:true}）
.addTo（此.map）
.bindPopup（此.popupContent）；
this.markers.push（this.newMarker）；
this.newMarker.on（“popupopen”，this.onPopupOpen，this）；
},
onPopupOpen（索引）{
$（“.标记删除按钮：可见”）。单击（（）=>{
this.map.removeLayer（this.newMarker）；
});
}
}
};

变量的范围应属于组件，以便您以后能够删除它。现在它只存在于

onClick

方法中。您可以阅读有关变量作用域的更多信息。为了解决您的问题，您需要将

newMarker

添加到

data（）

函数中：

// ...
data() {
  return {
    // ...
    tileLayer: null,
    newMarker: null
  };
},
// ...
onClick(e) {
  this.newMarker = L
    .marker(e.latlng, { draggable: true })
    .addTo(this.map)
    .bindPopup(this.popupContent);

  this.markers.push(this.newMarker);

  this.newMarker.on("popupopen", this.onPopupOpen, this);
},

onPopupOpen(index) {
  $(".marker-delete-button:visible").click(() => {
    this.map.removeLayer(this.newMarker);
  });
}

完整的代码如下所示：

<template>
  <div id="app" class="container-fluid">
    <div class="row">
      <div class="col-md-9">
        <div id="map" class="map" style="height: 781px;"></div>
      </div>
      <div class="col-md-3">

      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      map: null,
      markers: [],
      mapSW: [0, 4096],
      mapNE: [4096, 0],
      tileLayer: null,
      newMarker: null
    };
  },

  mounted() {
    this.initMap();
    this.initLayers();
    this.onClick();
    this.onPopupOpen();
  },

  computed: {
    popupContent: function() {
      return "<input type='button' value='Delete' class='marker-delete-button' /> <br> <input type='button' value='Add Event' class='add-event'/>";
    }
  },

  methods: {
    initMap() {
      this.map = L.map("map").setView([0, 0], 1);
      this.tileLayer = L.tileLayer("/static/map/{z}/{x}/{y}.png", {
        maxZoom: 4,
        minZoom: 3,
        continuousWorld: false,
        noWrap: true,
        crs: L.CRS.Simple
      });
      this.tileLayer.addTo(this.map);

      this.map.on("click", this.onClick, this);

      this.map.setMaxBounds(
        L.LatLngBounds(L.latLng(this.mapSW), L.latLng(this.mapNW))
      );
    },

    initLayers() {},

    onClick(e) {
      this.newMarker = L
        .marker(e.latlng, { draggable: true })
        .addTo(this.map)
        .bindPopup(this.popupContent);

      this.markers.push(this.newMarker);

      this.newMarker.on("popupopen", this.onPopupOpen, this);
    },

    onPopupOpen(index) {
      $(".marker-delete-button:visible").click(() => {
        this.map.removeLayer(this.newMarker);
      });
    }
  }
};
</script>


导出默认值{
名称：“应用程序”，
数据（）{
返回{
map:null，
标记：[]，
mapSW:[04096]，
mapNE:[4096,0]，
tileLayer:null，
newMarker:null
};
},
安装的（）{
this.initMap（）；
这个.initLayers（）；
this.onClick（）；
this.onPopupOpen（）；
},
计算：{
popupContent:function（）{
返回“
”；
}
},
方法：{
initMap（）{
this.map=L.map（“map”）.setView（[0,0]，1）；
this.tillelayer=L.tillelayer（“/static/map/{z}/{x}/{y}.png”{
最大缩放：4，
minZoom:3，
连续世界：错误，
诺拉普：没错，
crs:L.crs.Simple
});
this.tillelayer.addTo（this.map）；
this.map.on（“单击”，this.onClick，this）；
this.map.setMaxBounds(
L.LatLngBounds（L.latLng（this.mapSW），L.latLng（this.mapNW））
);
},
initLayers（）{}，
onClick（e）{
this.newMarker=L
.marker（e.latlng，{draggable:true}）
.addTo（此.map）
.bindPopup（此.popupContent）；
this.markers.push（this.newMarker）；
this.newMarker.on（“popupopen”，this.onPopupOpen，this）；
},
onPopupOpen（索引）{
$（“.标记删除按钮：可见”）。单击（（）=>{
this.map.removeLayer（this.newMarker）；
});
}
}
};

您还可以使用hasLayer方法在移除标记之前验证标记是否确实在地图上，如下所示：

if (this.map.hasLayer(this.newMarker)) this.map.removeLayer(this.newMarker);

您还可以使用hasLayer方法在移除标记之前验证标记是否确实在地图上，如下所示：

if (this.map.hasLayer(this.newMarker)) this.map.removeLayer(this.newMarker);