Отображение точек на Яндекс картах 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>
Вот вроде и все, надеюсь что кому-то это поможет, пользуйтесь и оставляйте в комментариях отзывы и пожелания!
Евгений Мигачев