OW Debug - Notice
Message: Trying to access array offset on value of type null
File: /home/romarekl/public_html/sosyallift.com/ow_plugins/forum/controllers/topic.php
Line: 136
PHP Coğrafi Konuma göre sıralama Forum | Sosyallift©
Loading...
 
tr
Whordark
Whordark Ocak 30 '18
Coğrafi sıralama: Mesafeye göre Sıralama için Cihaz Coğrafi Konumunu Kullanma

Bu makalede, bir web sayfasındaki öğelerin listesini sıralamak için konum bilgisinin nasıl kullanılacağını inceliyoruz. Bu, yerel arama sonuçları için yararlı olabilir; örneğin 'Bana yakın restoranlar' türündeki aramalarda veya şirketin ofis konumları gibi önceden tanımlı bir yer listesini kullanıcıya mesafeden sıralamak için kullanabilirsiniz.

Konuma dayalı bağlama dayalı bilgi, özellikle girişin daha zor olduğu mobil kullanıcılar için mükemmel kullanılabilirlik avantajları sunmaktadır. Örneğin, açılan listede uzun bir ülke listesinde gezinme acısını kim çekmiyor? Bu tür kullanılabilirlik sorunları, kullanıcıların bulundukları yere göre yeniden organize olduklarını fark etmeyen, mobil kullanıcı deneyimini bozabilir veya kırabilir, ancak olmadığında hayal kırıklığına uğrayabilirler!

Aşağıdaki örnekte, ilgi noktalarımızın bir listesine (POI'ler) sahip olduğumuzu ve her İÇN'nin bir enlem, boylam (latlon) çifti şeklinde konum bilgisine sahip olduğunu varsayacağız. Bu makale için, bu İÇN listesinin nereden geldiğine, ister yerel bir aramanın sonucu olsun veya önceden tanımlanmış yerlerin bir listesiyle ilgili değiliz.

Ayrıca, high-end'in yanı sıra düşük uçlu cihazları nasıl ele alacağımızı da düşünürüz. İleri teknoloji cihazlar için, kullanıcının konumunu belirlemek ve bu verilere dayalı olarak sıralama yapmak için HTML5 Geolocation API'sını kullanacağız. Coğrafi konumu desteklemeyen düşük uçlu cihazlar için, bunun gibi işlevsellik için yalnızca 'desteklenmeyen' veya 'cihaz mesajınızı yükseltin' çıktısı vermek daha kolay olur. Bununla birlikte, bir tanesine daha iyi gider ve biraz sunucu tarafı yardımı ile bu tür cihazlar için benzer birdeneyim sunabilmeyi düşünürüz.


Yer bazlı sıralama örneği: konumun kazanılmasından önceki üst seviye (sol) - izinler iletişim kutusuna dikkat edin ve
konum elde edildikten sonra düşük seviye (sağdaki) not edin - elle girişi not edin.

Düşük uçlu cihazlar için geosorting

Geolocation API'sı yetenekli cihazlarda desteklendiğinde, bu tamamen sorun yaratmaz. Peki ne JavaScript'ı veya Coğrafi Konum sensörlerini destekleyen alçakgönüllü cihazlar ne olacak? Bir seçenek bu işlevi tamamen atlamak olabilir, ancak kolay şeyler benimsemek kolay olmalı, zor şeyler olabiliyor olmalı, daha iyi gidip üst düzey ve düşük düzeyli deneyimler arasındaki boşluğu doldurmaya çalışalım.

Bir seçenek GeoIP tekniklerinin kullanılmasıdır. GeoIP, kullanıcının yaklaşık konumunu belirlemek için cihazın IP adresini kullanır. Ülkeye ve genellikle şehir kararlarına güvenlidir ve bu nedenle, bir ülke listesini ya da şehir düzeyinden daha ince parçacık gerektirmeyen uygulamalar için kullanılabilir; örneğin, bir listeyi ülkeler listesine göre yeniden düzenlemek, örnek vermek için kullanabiliriz. daha önce bahsedilen.

Bununla birlikte, uygulamanın yakınlardaki restoranlar gibi yerel bilgileri kullanması gerekiyorsa , GeoIP tekniklerinin kullanışlılığı sınırlı olacaktır.

Düşük uçlu cihazlar için basit ama etkili bir çözüm, kullanıcının manuel olarak konumlarını girmesine izin vermektir . Evet, problemin düşük teknolojili bir çözümüdür, ancak kısmi bir adres bile yerel arama için kullanılabilir olması için doğru bir şekilde coğrafi kodlanabilir.

Bunu uygulamak için, bir form, basit göze çarpmayan bir metin kutusu olarak sunulacak ve kullanıcı yoksaymayı seçerse, web sayfası varsayılan liste siparişiyle çalışmaya devam edecektir. Ancak bir kullanıcı bir adres veya yere girdiğinde, Google'ın ücretsiz Geocoding API'sını kullanarak girilen konumun latlonunu belirleriz ve daha sonra ileri teknoloji cihazlar için yaptığımız gibi konum listesini sıralayacağız; ancak bu kez sunucusu. Dolayısıyla, benzer işlevler düşük-son kullanıcı için mevcut olacak, ancak kullanıcı bunun için biraz daha çalışmak zorunda kalacaktır.

İlk sayfa talebi üzerine düşük tanımlı cihaza varsayılan sipariş vererek 1 yerlerin başlangıç ​​listesini gösteririz . Kullanıcının bir konum belirleyebilmesi için form ve metin kutusu da eklenir. Yani, low-end için HTML gibi bir şey görünecektir:

<div>

<form action="">

Address: <input type="text" name="address" /><input type="submit" value="Update"/>

</form>

</div>

<div>

Your location: <?php print !empty($address)?$address:'unknown' ?>

</div>

<h2>Our offices</h2>

<ul id="locations">

<?php

foreach($locations as $location) { ?>

<li id="<?php print $location['id']?>" data-latlon="<?php print $location['latlon']?>"><?php print $location['address']?></li>

<?php } ?>

</ul>

Bu örnekte sunucu kodunun dili olarak PHP kullanıyoruz, ancak eşit olarak kullanılabilir. Yukarıdaki kodda, POI'lerimiz gibi bir dizi konum üzerinde döngüyüz:

$locations = array(array("id" => "office-us", "latlon" => "40.7251397,-73.9918808", "address" => "NEW YORK - 315 Bowery, Manhattan, New York, USA"),

array("id" => "office-irl", "latlon" => "53.349635, -6.250268", "address" => "DUBLIN - 2 La Touche House, IFSC, Dublin 1, Ireland"),

array("id" => "office-de", "latlon" => "52.489405, 13.359632", "address" => "BERLIN - Hauptstrasse 155, Schoneberg, Berlin, Germany"));

Ayrıca, kullanıcı tarafından girilen adresi almak, Google API'sını kullanarak coğrafi kodlamak (aşağıya bakın) için en temel bazı form işlemlerini de ekliyoruz ve daha sonra en yakın İÇN'leri bulmak için sıralama işlevimizi çağırıyoruz:

if(isset($_GET['address'])) $address = $_GET['address'];

if(!empty($address)) {

sortResults($address, $locations);

}

function sortResults($address, &$locations) {

$latlon = geocodeAddress($address);

. . .

}

İleri teknoloji cihaz sürümünde olduğu gibi, sonuçlarımızı cihazdan kullanıcıya kadar olan mesafeye göre sıralamamız gerekir. Daha önce yaptığımız gibi benzer bir özel karşılaştırma işlevi yazabiliriz ve PHP usortişlevini bu karşılaştırıcıyla çağırabiliriz :

function sortResults($address, &$locations) {

$latlon = geocodeAddress($address);

//Call usort with anonymous comparator function

usort($locations, function($a, $b) use ($latlon) {

$locA = array_map('floatval', array_map('trim', explode(',', $a['latlon'])));

$locB = array_map('floatval', array_map('trim', explode(',', $b['latlon'])));

$distA = geoDistance($latlon['lat'], $latlon['lon'], $locA[0], $locA[1]);

$distB = geoDistance($latlon['lat'], $latlon['lon'], $locB[0], $locB[1]);

if($distA == $distB) {

return 0;

}

return ($distA < $distB) ? -1 : 1;

});

}

İki latlon nokta arasındaki mesafeyi belirleyin

İki latlon noktası arasındaki mesafeyi hesaplamak için benzer bir algoritma kullanıyoruz, ancak bu sefer sunucuda. Çeşitli uzak mesafe algoritmaları mümkündür, aşağıdaki kod Haversine mesafesini kullanmaktadır .

function geoDistance($latitudeFrom, $longitudeFrom, $latitudeTo, $longitudeTo, $earthRadius = 6371000)

{

// convert from degrees to radians

$latFrom = deg2rad($latitudeFrom);

$lonFrom = deg2rad($longitudeFrom);

$latTo = deg2rad($latitudeTo);

$lonTo = deg2rad($longitudeTo);

$latDelta = $latTo - $latFrom;

$lonDelta = $lonTo - $lonFrom;

$angle = 2 * asin(sqrt(pow(sin($latDelta / 2), 2) +

cos($latFrom) * cos($latTo) * pow(sin($lonDelta / 2), 2)));

return $angle * $earthRadius;

}

?>

Google API'sı ile bir adres coğrafi kodla

Latlonun kullanıcı tarafından belirlenen yere göre belirlenmesi için aşağıdaki fonksiyonu kullanırız. Kullanıcı tarafından konumu temsil eden bir dize verildiğinde, işlev Geocoding API'sini istemekte ve başka şeylerin yanı sıra konumun enlem ve boylamını içeren bir JSON nesnesi döndürür:

function geocodeAddress($address) {

// Base URL for the Google geocoding API

$API_REQ = "https://maps.googleapis.com/maps/api/geocode/json?sensor=false&amp;address=&quot;;

$req = $API_REQ . urlencode($address);

// Send API request to Google geocoder

$response = file_get_contents($req);

// Parse json response

$response = json_decode($response, true);

$lat = $response['results'][0]['geometry']['location']['lat'];

$lon = $response['results'][0]['geometry']['location']['lng'];

return array('lat'=> $lat, 'lon' => $lon);

}

Bir konuma Google Map ekleme

Tamamlamak için ve örnek biraz daha cazip hale getirmek için, her İÇN İÇİN bir Google haritası ekleyeceğiz.

HTML İÇN listesini biraz değiştirdik, şimdi divharitamızı yükleyeceğimiz bir ilave içeriyordu :

<h2>Our offices</h2>

<ul id="locations">

<li id="office-nyc" data-latlon="40.7251397,-73.9918808">NEW YORK - 315 Bowery, Manhattan, New York, USA

<div id="map-canvas-0" ></div>

</li>

<li id="office-ber" data-latlon="52.489405, 13.359632">BERLIN - Hauptstrasse 155, Schoneberg, Berlin, Germany

<div id="map-canvas-2"></div>

</li>

<li id="office-dub" data-latlon="53.349635, -6.250268">DUBLIN - 2 La Touche House, IFSC, Dublin 1, Ireland

<div id="map-canvas-1"></div>

</li>

</ul>

Şimdi İÇN'ler listemiz üzerinde tekrar ediyoruz ve bu sefer her İÇN'nin latlonunun merkezileştirildiği bir haritayı tanımladığımız gibi oluşturmak için Google Maps API'yı kullanacağız div. Dolayısıyla, daha önce olduğu gibi döngü ayarladık, ancak bu sefer her İÇN mapOptions için latlon'u içeren bazılarını ve diğer bazı harita ayarlarını tanımlıyoruz ( daha fazla ayrıntı için Google Maps API belgelerine bakın ):

var mapOptions = {

zoom: 16,

center: new google.maps.LatLng(Number(loc[0]),Number(loc[1]))

};

Şimdi haritayı çizmeye hazırız, iddaha önce tanımladığımız her harita divs için hakkımız olduğundan emin olun :

var map = new google.maps.Map(document.getElementById('map-canvas-' + i), mapOptions);

Tam döngü aşağıda verilmiştir:

// Iterate over POIs

var locations = document.getElementById('locations');

var locationList = locations.querySelectorAll('li');

for(var i=0;i<locationList.length; i++) {

var loc = locationList[i].getAttribute('data-latlon').split(',');

var mapOptions = {

zoom: 16,

center: new google.maps.LatLng(Number(loc[0]),Number(loc[1]))

};

var map = new google.maps.Map(document.getElementById('map-canvas-' + i), mapOptions);

}

İleri teknoloji cihazlar için dinamik haritalar, düşük maliyetli statik haritalar

Bu koda yapabileceğimiz son gelişmelerden biri, düşük yoğunluklu ve düşük olasılıkla alçak uç aygıttan parçalanabilir dinamik JavaScript haritaları yerine, düşük uçlu cihazlar için statik bir harita görüntüsü döşeme sunmaktır Sadece ana hatlarıyla. Bu, aygıtın yeteneklerini belirlemek için sunucu tarafında aygıt algılama kullanılarak ve ardından uygun harita türünü dinamikle statik olarak çıkarılarak elde edilebilir.

Google Haritalar API'sı ile statik bir harita karosu sunmak neredeyse önemsizdir! srcBir resim etiketinin URL'si olarak bir latlon koordinatının etrafında bir statik döşeme istemek yeterlidir . Yakınlaştırma düzeyi ve döşeme boyutu gibi diğer mantıklı seçenekler de belirtilebilir :

//Build up the static map tile URL

$mapUrl = "http://maps.google.com/maps/api/staticmap?&quot;;

//Supply latlon

$mapUrl .= 'center=' .$lat . ',' . $lon;

//Set zoom, size, maptype

$mapUrl .= '&zoom=15&size=512x512&maptype=roadmap&sensor=false';

print '<img src="'.$mapUrl .'" />';

Dolayısıyla düşük tanımlı cihazımızın döngüsü aşağıdaki gibi değiştirildi:

<h2>Our offices</h2>

<ul id="locations">

<?php

foreach($locations as $location) {

$latlon = explode(',', $location['latlon']);

$url = "//maps.google.com/maps/api/staticmap?";

//Supply lat lon

$url .= 'center='.$latlon[0].','.$latlon[1];

//Set zoom, size, maptype

$url .= '&zoom=15&size=200x200&maptype=roadmap&sensor=false';

?>

<li id="<?php print $location['id']?>" data-latlon="<?php print $location['latlon']?>">

<?php print $location['address']?>

<br />

<img src="<?php print $url?>" />

</li>

<?php } ?>

</ul>

</html>

Sonuç

Bu makalede, bir kullanıcıya sunulan verilerin sıralama düzenini değiştirmek için konum bilgilerinin nasıl kullanılacağını gösterdik. İleri teknoloji cihazlar için, kullanıcının yerini belirlemek için HTML5 Geolocation API'sı kullanılmıştır. Yer belirleme özelliklerine sahip olmayabilecek düşük uçlu cihazları da düşündük ve bu durumda, kullanıcının manuel olarak bir yer girmesine izin veriyoruz. Her iki durumda da, konum bilgisi mevcut olmadığında verilerin varsayılan sıralama sırası sunulmuştur. Üst düzey durumda, bu, konum izni verilmesini beklerken veya örneğin bir GPS düzeltmesi beklerken sayfa oluşturma işlemini engellemeyeceğimizdir. Düşük seviye durumunda, liste bilgileri, kullanıcı tarafından konum bilgisi sağlandığı takdirde güncellenir. Ancak her iki durumda da, hemen görüntülenebilecek bazı bilgiler mevcuttur ve bu mümkünse daha sonra rafine edilir.

Bağlantılar ve Referanslar
Paylaş: