PwRGeoPicker wybór punktu RUCH w usłudze PwR
Biblioteka do implementacji możliwości wyboru punktu dostawy "Paczka w Ruchu"
Wersja: 0.3
Spis treści:
Wtyczka działa w formacie "inline" oraz jako wyskakujące okno popup
Zaawansowana konfiguracja w wersji popup
Formatowanie okna popup ( mapa )
Wtyczka do poprawnego działania wymaga:
Do działania wtyczka wymaga dodania do kodu źródłowego bibliotek JS oraz CSS:
<link type="text/css" rel="stylesheet" media="all" ref="https://mapka.paczkawruchu.pl/paczkawruchu.css">
<script type="text/javascript" src="https://mapka.paczkawruchu.pl/jquery.pwrgeopicker.min.js"></script>
Oraz biblioteki Google Maps wraz z kluczem:
Przykład:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&language=pl&libraries=places&key=API_KEY"></script>
API_KEY - Klucz api do pobrania zgodnie z instrukcją :
https://developers.google.com/maps/documentation/javascript/get-api-key
<div id="inline_map"></div>
<script type="text/javascript">
$(function(){
$('#inline_map').pwrgeopicker('inline');
});
</script>
<button id="popup">CLICK ME</button>
<script type="text/javascript">
$(function(){
$('#popup').pwrgeopicker();
});
</script>
<button id="popup">CLICK ME</button>
<script type="text/javascript">
$(function(){
$('#popup').pwrgeopicker('popup',{
'popup': true,
'form': {
'city': 'Warszawa',
'street': 'ul.Bliska 10'
},
'onselect': function(data){
alert(data['Location']);
}
});
});
</script>
Nazwa |
Wartości |
Opis |
Wartość domyslna |
pwr_api_url |
url |
Adres do API |
'' |
inline |
'popup', 'inline' |
Określa wersje mapy: inline lub popup |
'popup' |
filter_by_city |
true/false |
Ustawia dodatkowe filtrowanie po stronie serwera |
true |
popup_template |
html_code |
szablon okna popup na mapie |
(opis poniżej) |
popup |
true / false |
Określa czy kliknięcie w pinezkę ma generować okno popup |
false |
max_points |
integer |
Maksymalna ilość punków umieszczanych na mapie. Wartość 0 oznacza bez ograniczeń |
100 |
onselect |
function |
Funkcja wywoływana w momencie wybrania punktu |
(opis poniżej) |
CashOnDelivery |
true/false/none |
Filtr punktów wg. możliwość płatności za pobraniem |
none |
auto_start |
true/false |
Ustawione na 'true' wyszukuje punkty zaraz po zainicjalizowaniu mapy |
false |
locale |
object |
Komunikaty np. przycisk szukaj etc. |
(opis poniżej) |
form |
object |
Domyślne ustawienia miasta oraz ulicy |
(opis poniżej) |
map |
object |
Ustawienia mapy google https://developers.google.com/maps/documentation/javascript/ |
(opis poniżej) |
Domyślny szablon okna popup na mapie. #{element} - format oznaczania elementów punktu.
<div>#{Location}<br><b>DestinationCode: #{DestinationCode}</b><br><b>StreetName: #{StreetName}</b><b>CashOnDelivery: #{CashOnDelivery}</b><br><br><b>PSD: #{PSD}</b><br><button>Select</button>
Parametry przekazane w pierwszym argumencie. Klucze parametrów mogą być użyte przy konstrukcji szablonu okna popup na mapie np. #{BuildingNumber}
{
DestinationCode: "0101-0049-11-04",
StreetName: "PANNY WODNEJ",
BuildingNumber: "50",
City: "Warszawa",
Longitude: "21.1885",
Latitude: "52.1838",
CashOnDelivery: "false",
Location: "0",
PSD: "414987",
Available: "T"
}
Domyślne teksty
{
city: 'Miasto...',
street: 'Ulica...',
searchbtn: 'szukaj >',
no_points: 'Nie znaleziono punktów',
bad_form-data: 'Wpisz poprawną nazwę miasta i/lub ulicy'
}
Domyślne ustawienia miasta i/lub ulicy
{
city: 'Warszawa',
street: 'Ul. Bliska'
}
Domyślne ustawienia obiektu google maps.
{
center: [51.9077298, 19.9526048],
zoom: 7,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false
}
Płatność online - wszystkie punkty RUCH:
https://mapka.paczkawruchu.pl/demo/online.html
Płatność za pobraniem - wybrane punkty RUCH
https://mapka.paczkawruchu.pl/demo/cod.html
License
RUCH S.A. ALL RIGHT RESERVED