Question

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

开始搜索时，出现错误：这是有效的错误日志。它仅指代传单搜索功能。

未捕获的TypeError：无法读取未定义的属性'properties' 在NewClass._searchInLayer（leaflet-search.src.js：569）在leaflet-search.src.js：634 在NewClass.eachLayer（leaflet-src.js：6693）在NewClass._recordsFromLayer（leaflet-search.src.js：633）在NewClass._fillRecordsCache（leaflet-search.src.js：774）在leaflet-search.src.js：736

初始化地图-

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 || “默认标题” // !!!!!!!!!!!检查和默认值

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)
}

leaflet-search-无法读取未定义的属性“ properties”

1 个答案: