Laravel livewire - как передать гео координаты пользователя в компонент livewire - PullRequest
Новая
       30

Laravel livewire - как передать гео координаты пользователя в компонент livewire

1 голос
/ 22 апреля 2020

Я пытаюсь отправить географические координаты (широту и долготу) пользователя в компонент livewire для загрузки близлежащих мест. Однако я не могу отправить его, потому что они javascript переменные. Вопрос в том, как отправить переменную javascript компоненту livewire?

Вот что я сделал до сих пор. 

# 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>

1 Ответ

1 голос
/ 24 апреля 2020

Вам нужно будет генерировать событие глобально из вашего скрипта. как это: 

 //emit this event inside your success function. pass latitude and longitude with the event 

  window.livewire.emit('set:latitude-longitude', latitude, longitude)

После этого вы можете прослушивать это событие из вашего класса компонента livewire, как это: 

  protected $listeners = [
        'set:latitude-longitude' => 'setLatitudeLongitude'
    ];

Затем установите ваш переданный lat long, используя функцию setLatitudeLongitude внутри вашего компонента livewire учебный класс. 

public function setLatitudeLongitude($latitude, $longitude) 
{
   $this->latitude = $latitude;
   $this->longitude = $longitude;
}

Дайте мне знать, если вам нужны дальнейшие объяснения :)

...