Javascript 传单-geoJSON数据未在显示的地图上添加标记

我已经按照生成随机的纬度和经度来使用传单，但在地图上显示它们时遇到了一些麻烦

我正在vue应用程序中使用此代码

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

export default {
  name: 'Map',
  data() {
    return {
      map: null,
      latBounds: [],
      lngBounds: [],
      features: []
    }
  },
  mounted () {
    this.initMap()
  },
  computed: {

  }, // end computed
  methods: {
    initMap() {
      // init Leaflet map
      this.map = L.map(this.$refs.map)
      console.log(this.map)
      // init tile layer
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 16
      }).addTo(this.map)
      // geolocate user
      this.map.locate({ setView: true })
      // add marker
      let icon = L.divIcon({ 
        html: '<i class="fas fa-map-marker"></i>',
        className: 'map-marker'
      })
      this.map.on('locationfound', (e) =>{
        console.log(e)
        // set bounds
        // e.bounds._northEast
        // e.bounds._southWest
        this.latBounds.push(e.bounds._northEast.lat, e.bounds._northEast.lng)
        this.lngBounds.push(e.bounds._southWest.lat, e.bounds._southWest.lng)
        L.marker(e.latlng, { icon: icon }).addTo(this.map)
        this.createMarkers()
      })
    }, // end initMap
    createMarkers() {
      let icon = L.divIcon({ 
        html: '<i class="fas fa-map-marker"></i>',
        className: 'point-marker'
      })
      
      for( var i = 0; i < 50; i++ ){
        let lat = Math.random() * (this.latBounds[1] - this.latBounds[0] + 1) + this.latBounds[0]
        let lng = Math.random() * (this.lngBounds[1] - this.lngBounds[0] + 1) + this.lngBounds[0]
        this.features.push({
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [lat, lng]
          },
          "properties": {
            "title": `point_${i}`,
            "marker-symbol": "harbor"
          }
        })
      }
      let geoJSON = {
        "type": "FeatureCollection",
        "features": this.features
      }
      L.geoJSON(geoJSON, {
        pointToLayer(feature, latlng) {
          return L.marker(latlng, { icon: icon })
        },
        style() {
          return { color: "#ff0000" }
        }
      }).addTo(this.map)
      console.log(this.features)
    } // end createMarkers
  }
}
</script>

从“传单”中导入L
导入“传单/目录/传单.css”
导出默认值{
名称：'地图'，
数据（）{
返回{
map:null，
latBounds:[]，
lngBounds:[]，
特色：[]
}
},
挂载（）{
this.initMap（）
},
计算：{
}，//结束计算
方法：{
initMap（）{
//初始单张图
this.map=L.map（this.$refs.map）
console.log（this.map）
//初始瓷砖层
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
最大缩放：16
}).addTo（此.map）
//地理定位用户
this.map.locate（{setView:true}）
//添加标记
设icon=L.divIcon（{
html:“”，
类名：“地图标记”
})
this.map.on（'locationfound'，（e）=>{
控制台日志（e）
//设定界限
//东北部
//东界.\u西南
this.latBounds.push（e.bounds.\u northEast.lat，e.bounds.\u northEast.lng）
此.lngBounds.push（东边界.\u西南纬度，东边界.\u西南液化天然气）
L.marker（e.latlng，{icon:icon}）.addTo（this.map）
这是createMarkers（）
})
}，//结束initMap
createMarkers（）{
设icon=L.divIcon（{
html:“”，
类名：“点标记”
})
对于（变量i=0；i<50；i++）{
设lat=Math.random（）*（this.latBounds[1]-this.latBounds[0]+1）+this.latBounds[0]
设lng=Math.random（）*（this.lngBounds[1]-this.lngBounds[0]+1）+this.lngBounds[0]
这是推({
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[纬度，液化天然气]
},
“财产”：{
“标题：`点${i}`，
“标记符号”：“港口”
}
})
}
让geoJSON={
“类型”：“FeatureCollection”，
“功能”：此为“功能”
}
L.geoJSON（geoJSON{
pointToLayer（特性、板条）{
返回L.marker（latlng，{icon:icon}）
},
样式（）{
返回{color:#ff0000}
}
}).addTo（此.map）
console.log（this.features）
}//结束标记
}
}

---

在控制台中，我可以看到创建的纬度和经度坐标，但在用户地理定位时显示的地图中，我不会看到添加的任何标记。我的代码中是否有错误，如何修复？

这是混合轴顺序的另一个实例（传单

LatLng

与GeoJSON）。看见