Створення карти з останніми фотографіями з VK з використанням VKScript

В даній статті ми будемо робити карту з додаванням на неї останніх фотографій з соціальної мережі VK.COM.



Буду використовувати Leaflet бібліотеки для промальовування карти.

Пройдемо авторизацію додатки VK і налаштуємо карту:
VK.init({
apiId: 2866099 // ID вашого додатки VK
});

var map = L. map('map',{maxBounds:[[-90, -180],[90, 180]]}).setView([56.94497418, 91.7578125], 3);
L. tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 2 }).addTo(map);


Якщо ви хочете робити щось подібне для однієї точки на карті, то код нижче вам підійде, але він нам не підходить, так як потрібно отримувати фотографії з безлічі точок на карті.
Тут код, який нижче
getPhotos(55.75030364, 37.62336731, 50000, 20, 0);

function getPhotos(lat_,long_,radius_,count_, old_photo) {
VK.Api.call('photos.search', {lat: lat_, long: long_, radius: radius_, count: count_, sort: 0, v: '5.27'}, function® {
if(r.response) {
for (var i=0;i<r.response.items.length;i++)
{
if (r.response.items[i].id != old_photo) {
var myIcon = L. divIcon({html: '<div style="background-image: url(' + r.response.items[i].photo_75 + ');" class="icon_photo"></div>'});
L. marker([r.response.items[i].lat, r.response.items[i].long], {
bounceOnAdd: true,
icon: myIcon,
riseOnHover: true
}).addTo(map).bindPopup('<center><a href="http://vk.com/photo' + r.response.items[i].owner_id + '_' + r.response.items[i].id + '" target="_blank">Переглянути на сайті<br/><div style="background-image: url(' + r.response.items[i].photo_604 + ');" class="icon_photo2"></div></a></center>');
if (i == 0) old_photo = r.response.items[0].id;
} else break;
}
setTimeout(function() { getPhotos(lat_, long_, 50000, 20, old_photo); }, 3000);
} else alert(r.error.error_msg);
});
}



Проблема в тому, що в API VK обмеження на 3 запиту в секунду, з боку клієнта, тому ми будемо використовувати execute, він дозволить зібрати інформацію про 25 координатах за один запит.

Про execute я вже писав в попередній статті, тому писати ще раз що це не буду.

І так перейдемо до коду з застосуванням VKScript.

Оголосимо два масиву, в одному ми будемо зберігати координати міст, а в іншому останню додану фотографію в місто(це потрібно, щоб не додавалися на карту дублікати).
var map_сordinates= [[55.7503, 37.6233],[56.8497, 53.2198],[55.7858, 49.1500],[59.9659,30.3434],[57.9848,56.3598],[54.5975,56.0961],[54.9271,73.4106],[51.5360,39.1772],[55.0091,82.9193],[56.4867,85.0177],[58.1272,52.6636],[51.1586,71.4907],[49.8946,73.2348],[50.4365,30.5255],[56.0415,51.9645]];
var map_old_photo = [];


Доречі, чому ж у мене йде прив'язка до міст? Справа в тому, що метод photos.search повертає тільки в певному радіусі, центром якої є координати з масиву map_сordinates.

І додамо функцію getPhotos.
// radius_ - радіус, count_ - кількість фотографій запитуваних за один запит.
function getPhotos(radius_, count_) {
// В результаті нам поверне масив об'єктів, що містять інформацію про фотографії
var code = 'return [';
for (var i=0;i<map_сordinates.length;i++) 
{
code += 'API.photos.search({"lat": "' + map_сordinates[i][0] + '", "long": "' + map_сordinates[i][1] + '", "radius": "' + radius_ + '", "count": "' + count_ + '", "sort": 0, "v": "5.27"})';
if (i != map_сordinates.length-1) 
code += ',';
}
code += '];';

VK.Api.call("execute", {code: code}, function(data) {
if (data.response) {
for (var i=0;i<data.response.length;i++) 
{ 
for (var j=0;j<data.response[i].items.length;j++)
{
if (data.response[i].items[j].id != map_old_photo[i]) 
{
var myIcon = L. divIcon({html: '<div style="background-image: url(' + data.response[i].items[j].photo_75 + ');" class="icon_photo"></div>'});
L. marker([data.response[i].items[j].lat, data.response[i].items[j].long], {
bounceOnAdd: true,
icon: myIcon,
riseOnHover: true
}).addTo(map).bindPopup('<center><a href="http://vk.com/photo' + data.response[i].items[j].owner_id + '_' + data.response[i].items[j].id + '" target="_blank">Переглянути на сайті<br/><div style="background-image: url(' + data.response[i].items[j].photo_604 + ');" class="icon_photo2"></div></a></center>');
if (j == 0) map_old_photo[i] = data.response[i].items[0].id;
} else break;
}
}
setTimeout(function() { getPhotos(50000, 20); }, 3000);
} else alert(data.error.error_code + '' + data.error.error_msg);
});
}


Викликати функцію можна передавши в неї 2 параметри: радіус і кількість фотографій запитуваних за один запит.
getPhotos(5000, 20);


Довелося зробити авторизацію, незважаючи на те, що метод відкритий просто так дані не повертає.

Исходники прикладу: github.com/romkagolovadvayha/photomapsVKAPI
Приклад: Перейти

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.