[英]Laravel livewire - how to pass geo coordinates of user to livewire component
I am trying to send geo coordinates (latitude and longitude) of user to a livewire component to load nearby places.我正在尝试将用户的地理坐标(纬度和经度)发送到 livewire 组件以加载附近的地方。 However I am unable to send it because they are javascript variables.
但是我无法发送它,因为它们是 javascript 变量。 Question is how do I send a javascript variable to a livewire component?
问题是如何将 javascript 变量发送到 livewire 组件?
Here is what I have done so far.这是我到目前为止所做的。
# home.blade.php
@extends('layouts.app')
@section('content')
<script>
var latitude;
var longitude;
navigator.geolocation.getCurrentPosition(
function success(pos) {
var loc = pos.coords;
latitude = loc.latitude;
longitude = loc.longitude;
},
function error(err) {
// console.warn(`ERROR(${err.code}): ${err.message}`);
$.getJSON('https://ipinfo.io/geo', function(response) {
var loc = response.loc.split(',');
latitude = parseFloat(loc[0]);
longitude = parseFloat(loc[1]);
});
}, options
);
</script>
@livewire('nearby')
@endsection
@livewireScripts
# Nearby.php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Listing;
class Nearby extends Component
{
use WithPagination;
public function render()
{
$listings = Listing::paginate(9);
return view('livewire.nearby', [
'listings' => $listings
]);
}
}
# nearby.blade.php - livewire blade
<div class="relative bg-gray-50 px-4 sm:px-6 lg:px-8">
<div class="relative max-w-6xl mx-auto">
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
@foreach($listings as $listing)
@include('components.listing',['listing'=>$listing])
@endforeach
</div>
<div class="text-center mx-auto mt-3">
{{ $listings->links() }}
</div>
</div>
</div>
You'll need to emit an event globally from you script.您需要从脚本全局发出一个事件。 like this:
像这样:
//emit this event inside your success function. pass latitude and longitude with the event
window.livewire.emit('set:latitude-longitude', latitude, longitude)
After that you can listen to this event from your livewire component class like this:之后,您可以像这样从您的 livewire 组件 class 收听此事件:
protected $listeners = [
'set:latitude-longitude' => 'setLatitudeLongitude'
];
Then set your passed lat long using setLatitudeLongitude function inside your livewire component class.然后在您的 livewire 组件 class 中使用 setLatitudeLongitude function 设置您通过的纬度。
public function setLatitudeLongitude($latitude, $longitude)
{
$this->latitude = $latitude;
$this->longitude = $longitude;
}
Let me know if you need further explanation:)如果您需要进一步解释,请告诉我:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.