如何解决如何在用户位置附近动态添加传单geoJSON标记
我正在寻找一种在用户位置附近添加一些标记的方法。目前,我可以通过创建一些纬度和经度点来生成标记并将其随机放置在传单地图上,但这并不是我想要的,我希望在用户地理位置定位之后,将一些标记添加到在半径范围内(可能的话)在2.5公里到5公里之间的可变距离附近贴近用户位置。我正在尝试制作类似神奇宝贝的逻辑,通过考虑用户的位置在地图上添加标记。
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'));
}
},},};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。