• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

Отображение точек на Яндекс картах 2.0 и 2.1 получая данные через json и объединяя в кластер

В этой статье приведены примеры кода получения координат точек через json и вывод на яндекс карты версии 2.0 и 2.1, в зависимости от масштаба точки объединяются - используется кластер...

  1. Главная
  2. Все про JS : jQuery, Node, AngularJS

В этой статье приведены примеры кода получения координат точек через 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>

Вот вроде и все, надеюсь что кому-то это поможет, пользуйтесь и оставляйте в комментариях отзывы и пожелания!

Евгений Мигачев

Рекомендуем

Теги

SEO HTML CSS JavaScript

Смотрите также

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©