如何在用户位置附近动态添加传单geoJSON标记

问题描述

我正在寻找一种在用户位置附近添加一些标记的方法。目前，我可以通过创建一些纬度和经度点来生成标记并将其随机放置在传单地图上，但这并不是我想要的，我希望在用户地理位置定位之后，将一些标记添加到在半径范围内（可能的话）在2.5公里到5公里之间的可变距离附近贴近用户位置。我正在尝试制作类似神奇宝贝的逻辑，通过考虑用户的位置在地图上添加标记。

我目前正在vue应用中使用此代码创建标记

    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 fa-2x text-warning"></i>',className: 'map-marker'
      })
      this.map.on('locationfound',async (e) =>{
        console.log(e)
        // set bounds
        // e.bounds._northEast
        // e.bounds._southWest
        this.latBounds.push(e.bounds._northEast.lat,e.bounds._southWest.lat)
        this.lngBounds.push(e.bounds._northEast.lng,e.bounds._southWest.lng)

        L.marker(e.latlng,{ icon: icon }).addTo(this.map)
        await this.createMarkers()
      })

    async createMarkers() {
      let icon = L.divIcon({ 
        html: '<i class="fas fa-map-marker fa-2x text-danger"></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","properties": {
            "name": "test point"
          },"geometry": {
            "type": "Point","coordinates": [lng,lat]
          }
        })
      }
      let geoJSON = {
        "type": "FeatureCollection","features": this.features
      }

      await L.geoJSON(geoJSON,{
        pointToLayer(feature,latlng) {
          return L.marker(latlng,{ icon: icon })
        }
      }).addTo(this.map)

感谢您的帮助/建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）