На клиенте я по умолчанию выставляю zoom равный 13:
<no-ssr>
<l-map
:zoom="13"
:center="[coordinates.lat, coordinates.lng]"
:options="options"
>
<l-tile-layer
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<l-marker
v-for="marker in markers"
:key="marker.id"
:lat-lng="[marker.lat, marker.lng]"
>
<l-popup>{{ marker.popUpText }}</l-popup>
</l-marker>
</l-map>
</no-ssr>
Но на стороне сервера я не хочу получать ВСЕ точки на карте:
Place.objects.all()
А хочу получить те, которые находятся в радиусе видимости пользователя, как-то так:
from django.contrib.gis.geos import Point
from django.contrib.gis.measure import Distance
lat = 52.5
lng = 1.0
radius = 10
point = Point(lng, lat)
Place.objects.filter(location__distance_lt=(point, Distance(km=radius)))
Вопрос в том, как я могу конвертировать zoom полученный на клиенте, в radius используемый в запросах на сервере?
Делать нужно так:
ref в <l-map> <no-ssr>
<l-map
ref="map"
:zoom="13"
:center="[coordinates.lat, coordinates.lng]"
:options="options"
>
<l-tile-layer
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<l-marker
v-for="marker in markers"
:key="marker.id"
:lat-lng="[marker.lat, marker.lng]"
>
<l-popup>{{ marker.popUpText }}</l-popup>
</l-marker>
</l-map>
</no-ssr>
let map = this.$refs.map.mapObject
center = map.getCenter()
zoom = map.getZoom()
bounds = map.getBounds()
let boundNorthEast = bounds.getSouthWest()
let distance = boundNorthEast.distanceTo(center)
let radius = distance / 1000
let latitude = center.lat
let longitude = center.lng
Ну а далее, отправляем данные на сервер.
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости