javascript - 传单搜索 - 无法读取未定义的属性 'properties'

Question

我尝试使用传单搜索。Vue-cli 组件。

开始搜索时，报错:这是一个有效的错误日志。仅指传单搜索功能。

Uncaught TypeError: Cannot read property 'properties' of undefined at NewClass._searchInLayer (leaflet-search.src.js:569) at leaflet-search.src.js:634 at NewClass.eachLayer (leaflet-src.js:6693) at NewClass._recordsFromLayer (leaflet-search.src.js:633) at NewClass._fillRecordsCache (leaflet-search.src.js:774) at leaflet-search.src.js:736

初始化 map -

initMap() {
  this.map = L.map('map', {
    center: [55.75, 37.61],
    zoom: 11,
    layers: this.layer
  })
  this.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution:
      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;'
  })
  this.tileLayer.addTo(this.map)

  // add marker
  this.createMarkerLayer(this.marker)
  })
},

创建标记层 -

createMarkerLayer(data) {
  const promiseMarkerArray = this.createMarkerArray(data)
  promiseMarkerArray
    .then(res => {
      this.markersArray = res
      this.markerLayer = L.layerGroup(this.markersArray)
      this.addMarker()
    })
    .catch(err => {
      console.log(err)
    })
},
// create aaray markers
createMarkerArray(data) {
  return new Promise((res, rej) => {
    return res(data.map(item => {
      let icon = null
      item.agent !== null ? icon = this.iconAgent : icon = this.iconDefault
      const marker = L.marker(item.coordinates, { title: item.title, icon: icon })
      marker.bindPopup('<p>' + item.title + '</p>').openPopup()
      marker.on('click', () => {
        this.sidebarToggle(item.id)
      })
      marker.alarm = item.alarm
      marker.agent = item.agent
      return marker
    }))
  })
},

创建传单搜索层 -

createSearch() {
  const markersLayerT = new L.LayerGroup()  // layer contain searched elements
  this.map.addLayer(markersLayerT)

  this.searchLayer = new L.Control.Search({
    position: 'topleft',
    layer: markersLayerT,
    initial: true,
    zoom: 18,
    marker: false
  })
  this.map.addControl(this.searchLayer)

  for (const i in this.marker) {
    const title = this.marker[i].title  // v alue searched
    const loc = this.marker[i].coordinates      // position found
    const marker1 = L.marker(loc, { 'title': title }) // se property searched
    marker1.bindPopup('title: ' + title)
    markersLayerT.addLayer(marker1)
  }
}

可能是 layer.feature.properties 中的问题。没有正确地将值传递给函数。

Answer 1

在我尝试填充图层的数据中，传单搜索包含空标题字段。添加了检查和默认值。

item.title= item.title || 'Default title' // !!!!!!!!!!!check and default value

for (const i in this.marker) {
    const title = this.marker[i].title  // value searched
    item.title= item.title || 'Default title' // !!!!!!!!!!!check and default value
    const loc = this.marker[i].coordinates      // position found
    const marker1 = L.marker(loc, { 'title': title }) // se property searched
    marker1.bindPopup('title: ' + title)
    markersLayerT.addLayer(marker1)
}