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

Question

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

我目前正在我的 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)

感谢help/suggestions。

Answer 1

这是我的地理定位代码，带有 Vue.js 和 leaflet.js 的位置标记。这是 Vue.js 混入。对于半径，您可以简单地增加或减少纬度和经度。

import * as L from 'leaflet';

// Geolocation marker icon
const locationMarker = L.icon({
  iconUrl: require('@/assets/img/LocationMarker.svg'),
  iconSize: [30, 30],
  iconAnchor: [13, 30],
  popupAnchor: [0, -18],
});

export default {
  // Geo API for mobile
  // Find current device position
  beforeCreate() {
    if (navigator.geolocation) {
      return;
    }
    navigator.geolocation.getCurrentPosition((position) => {
      this.isLoading = true;
      this.position = position.coords;
      if (this.center) {
        this.center.lat = position.coords.latitude;
        this.center.lng = position.coords.longitude;
      }
    });
  },

  methods: {
    /**
     * GeoLocation API
     */
    geoLoc() {
      // If geo exist
      if (window.navigator.geolocation) {
        // Give me position
        window.navigator.geolocation.getCurrentPosition((position) => {
          // Get coords from position
          const lat = position.coords.latitude;
          const lng = position.coords.longitude;

          // Initialization Vue geoMarker
          const geoMarker = this.geoMarker;

          // Check if geomarker have the ID which I need
          if (geoMarker.hasOwnProperty(this.geoMarkerId)) {
            // If have than remove it
            this.map.removeLayer(geoMarker[this.geoMarkerId]);
          }
          // Than create new one with the same static ID
          let marker = L.marker(L.latLng(parseFloat(lat), parseFloat(lng)), {
            icon: locationMarker,
          });

          // Must be in new array !!
          this.geoMarker[this.geoMarkerId] = marker.addTo(this.map);
          // Update Leaflet Map with new center coords
          this.center = new L.LatLng(lat, lng);

          // Then remove it
          setTimeout(() => {
            this.map.removeLayer(marker);
          }, 7000);
        });
      } else {
        // Och noo someone have any Geolocation :(
        window.alert(this.$t('general.geoLocNotSupported'));
      }
    },
  },
};

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

How to add leaflet geoJSON markers dynamically near user position

javascript

geolocation

geojson

leaflet

vue.js