Отображение точек на Яндекс картах 2.0 и 2.1 получая данные через json и объединяя в кластер
В этой статье приведены примеры кода получения координат точек через json и вывод на яндекс карты версии 2.0 и 2.1, в зависимости от масштаба точки объединяются - используется кластер...
В этой статье приведены примеры кода получения координат точек через json и вывод на яндекс карты версии 2.0 и 2.1, в зависимости от масштаба точки объединяются - используется кластер...
Извините что код без подсветки... пока еще это не успел здесь реализовать, но скоро все будет)
И так, для начала нам нужен файл с координатами точек, сформируем его при помощи PHP-кода:
function yajson() {
global $prefix, $db, $conf;
#echo "cron";
header('Content-Type: application/json; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
$json = '{"markers":['."n";
$result = $db->sql_query("SELECT sid, catid, uid, title, time, LEFT(hometext, 256), tipevak, gruzevak, status, url, tphone, gps, ecena1300, ecena1500, ebcena1500, ecendzma, ecenprost, ecenbeze, ecenpere, ecenzakm FROM ".$prefix."_ek WHERE gps > '0'");
$nom=1;
while(list($sid, $catid, $uid, $title, $time, $hometext, $tipevak, $gruzevak, $status, $url, $tphone, $gps, $ecena1300, $ecena1500, $ebcena1500, $ecendzma, $ecenprost, $ecenbeze, $ecenpere, $ecenzakm) = $db->sql_fetchrow($result)) {
$gps = str_replace(", ", " ", $gps);
list($lat, $lng) = split('[ ]', $gps);
$json.= "n".'{'.'"id": "'.$nom.'",';
$json.= '"cname": "'.$title.'",';
$json.= '"address": "Москва, Ленинский проспект, '.$nom.'",';
$json.= '"lat": "'.$lat.'",';
$json.= '"lon": "'.$lng.'"';
$json.= '},';
$nom++;
}
$json = substr($json, 0,-1);
$json.= '], '."n".'"status": "OK"'."n".'}';
echo $json;
}else{
echo '{"status": "false"}';
}
$handler = fopen("uploads/yamjson.xml", "wb+");
fwrite($handler,$json);
fclose($handler);
@chmod("uploads/yamjson.xml", 0666);
#header("Location: ".$admin_file.".php?op=sitemap");
#echo " yaxml ok - ".$nom;
}
<br>
+ к коду я добавил запись сформированных данных в файл uploads/yamjson.xml в последствии он будет формироваться по вызову через Cron. чтобы снизить нагрузку с сервера, т.к. карта выводится на каждой странице сайта и точек > 500
Вывод через Яндекс Карты 2.0:
При помощи jQuery (версия v1.10.2 ) выполняется запрос к php скрипту (код выше) и получаются данные для вывода
PHP код вывода точек:
$content = "<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {center: [55.302988,47.415765],zoom: 11, checkZoomRange: true});
myMap.controls.add("zoomControl")
.add("typeSelector")
.add("mapTools");
myGeoObjects = [];
$.getJSON("http://site.ru/index.php?name=cron&op=yajson", function(json){
if (json.status == 'OK') {
for (i = 0; i < json.markers.length; i++) {
myPlacemark = new ymaps.Placemark(
// Координаты
[json.markers[i].lat, json.markers[i].lon],
// данные
{
balloonContentHeader: '<div style="color:#659cc9;">'+json.markers[i].cname+'</div>',
balloonContentFooter: '<strong>Адрес:</strong> '+json.markers[i].address+'</span>',
});
myGeoObjects.push(myPlacemark);
}
clusterer = new ymaps.Clusterer();
clusterer.options.set({
gridSize: 100,
minClusterSize:2,
synchAdd:true
})
clusterer.add(myGeoObjects);
myMap.geoObjects.add(clusterer);
}
else
{
alert('Произошла ошибка!');
}
})
}
</script>
<br><b> Для более точного определения Вашего местоположения - нажмите в карте на кнопку:</b> <img src="".$conf['homeurl']."/images/geo.png" border="0" align="center" width="20" height="20" alt="Местоположение"><b> Развернуть во весь экран: </b> <img src="".$conf['homeurl']."/images/vovesekr.png" border="0" align="center" width="20" height="20" alt="Развернуть во весь экран">
<div id="map" style="width:100%; height:450px;"></div>";
<br>
Вывод через Яндекс Карты 2.1b:
Так же как и в предудующем примере - при помощи jQuery (версия v1.10.2 ) выполняется запрос к php скрипту (код выше) и получаются данные для вывода
PHP код вывода точек:
$content = "<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [".$tgps."],
zoom: ".$tzoom.",
controls: ['zoomControl', 'searchControl', 'typeSelector', 'geolocationControl', 'trafficControl', 'fullscreenControl']
});
myGeoObjects = [];
jQuery.getJSON("http://site.ru/index.php?name=cron&op=yajson", function(json){
if (json.status == 'OK') {
for (i = 0; i < json.markers.length; i++) {
myPlacemark = new ymaps.Placemark(
// Координаты
[json.markers[i].lat, json.markers[i].lon],
// данные
{
balloonContentHeader: '<div style="color:#659cc9;">'+json.markers[i].cname+'</div>',
balloonContentFooter: '<strong>Адрес:</strong> '+json.markers[i].address+'</span>',
}, {
// Опции.
// Необходимо указать данный тип макета.
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: 'http://api.yandex.ru/maps/doc/jsapi/2.x/examples/images/myIcon.gif',
// Размеры метки.
iconImageSize: [30, 42],
// Смещение левого верхнего угла иконки относительно
iconImageOffset: [-3, -42]
});
myGeoObjects.push(myPlacemark);
}
clusterer = new ymaps.Clusterer();
clusterer.options.set({
gridSize: 100,
minClusterSize:2,
synchAdd:true
})
clusterer.add(myGeoObjects);
myMap.geoObjects.add(clusterer);
}else{ alert('Произошла ошибка!');}
})
});
</script>
<br><b> Для более точного определения Вашего местоположения - нажмите в карте на кнопку:</b> <img src="".$conf['homeurl']."/images/geo.png" border="0" align="center" width="20" height="20" alt="Местоположение"><b> Развернуть во весь экран: </b> <img src="".$conf['homeurl']."/images/vovesekr.png" border="0" align="center" width="20" height="20" alt="Развернуть во весь экран">
<div id="map" style="width:100%; height:450px;"></div>";
<br>
Вот вроде и все, надеюсь что кому-то это поможет, пользуйтесь и оставляйте в комментариях отзывы и пожелания!
Евгений Мигачев
