如何在用户位置附近动态添加传单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)

感谢您的帮助/建议。

解决方法

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

import * as L from 'leaflet';

// Geolocation marker icon
const locationMarker = L.icon({
  iconUrl: require('@/assets/img/LocationMarker.svg'),iconSize: [30,30],iconAnchor: [13,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'));
      }
    },},};