Клуб API Карт

API 2.0 Cluster и JSON

Пост в архиве.
Добрый день одноклубники, решил переписать свою карту под api 2.0, но вот у меня проблемка в получении меток через JSON в кластер - подскажите как это добро переписать:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>Примеры. Размещение карты на странице.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU type="text/javascript"></script>
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://voda-st.ru/mapglubin.jstype="text/javascript"></script>
</head>
<body>
<h2>API 2.0 test</h2>
<div id="map" style="width:600px; height:300px"></div>
</body>
</html>

 

 

 

// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(init);
function init () {
// Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
var myMap = new ymaps.Map('map', {
// При инициализации карты, обязательно нужно указать
// ее центр и коэффициент масштабирования
center: [54.891586, 38.071433], // Ступино
zoom: 12,
           behaviors: ["default", "scrollZoom"]
}
);
// Создаем кластеризатор
cluster = new ymaps.Clusterer();
markers = [];
       if (clusterer) clusterer.clearMarkers(); // удаляем маркеры кластера
 YMaps.jQuery.getJSON("http://www.voda-st.ru/vivmarkers.php", function(json){ 
            if (json.status == 'OK') { 
            for (i = 0; i < json.markers.length; i++) {
var placemark=new YMaps.Placemark(new YMaps.GeoPoint(json.markers[i].lat,json.markers[i].lon));
placemark.description= '<div style="color:#ff0303;font-weight:bold">'+json.markers[i].cname+'</div>';
placemark.description = placemark.description+'<p style="color:black"><strong>Глубина:</strong> '+json.markers[i].glubina +' метров (метра)</p>'; 
markers.push(placemark);
}  
// Добавлеяем массив меток в кластер
cluster.add(markers);
// Добавляем кластер на карту
myMap.geoObjects.add(cluster);
}
else
{alert('Произошла ошибка!');}
})   
// Добавление стандартного набора кнопок
myMap.controls.add("mapTools")
// Добавление кнопки изменения масштаба 
.add("zoomControl")
// Добавление списка типов карты
.add("typeSelector")
.add("searchControl");
}

 

 

 

<?php
include("config.php");
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
$json = '{markers:['."\n";
$query1= "SELECT * FROM markers";
$result1 = mysql_query($query1);
if(mysql_num_rows($result1)>0)
{
while ($par1 = mysql_fetch_array($result1)){
$cname =  'www.voda-st.ru';
$exp_str = explode(",", $par1['coords']);
$lat = $exp_str[0];
$lng = $exp_str[1];
$json.= "\n".'{'.'"id": "'.$par1['id'].'",';
$json.= '"cname": "'.$cname.'",';
$json.= '"glubina": "'.$par1['glubina'].'",';
    
$json.= '"lat": "'.$par1['lat'].'",';
$json.=  '"lon": "'.$par1['lon'].'"';
$json.= '},';
}
$json = substr($json, 0,-1);
echo  $json;
echo '], ', "\n",  '"status": "OK"', "\n", '}';
}
else
{
echo '{"status": "false"}';
}
}
?>

 

 

я еще зеленый просьба не пинать, а наставить на путь истинный

знаю что нужно переписать YMaps.GeoPoint и placemark.description - но вот как в моем случае я хз

Вообще возможно в моем случае получать метки из БД в JSON как то по другому, не через jQuery ?

12 комментариев
Sergey Konstantinov
28 января 2016, 04:25
В данном случае всё просто:

new ymaps.Placemark(
  // Координаты
  [ json.markers[i].lat, json.markers[i].lon ],
  // данные
  {
     // html для отображения в балуне
     balloonContentHeader: json.markers[i].cname,
     balloonContentBody:

Глубина: ' + ymaps.formatter.distance(json.markers[i].glubina) + '

';
  });

Грузить данные с сервера лучше с помощью сторонних фреймворков (jQuery, например). jQuery можно подключать с серверов Яндекса: http://yandex.st/jquery/1.7.2/jquery.min.js

twirl , просьба посмотри своими глазами все ли ок?

ни к какую не могу понять, где где косяк? Выводит пустую карту, ни кластера, ни меток

насторажавает только markers.push(placemark);

правильно ли я добавляю метки в массив?

 


mapglubin.js

 

// Как только будет загружен API и готов DOM, выполняем инициализацию

ymaps.ready(init);


function init () {

// Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")

var myMap = new ymaps.Map('map', {

// При инициализации карты, обязательно нужно указать

// ее центр и коэффициент масштабирования

center: [54.891586, 38.071433], // Ступино

zoom: 12,

            behaviors: ["default", "scrollZoom"]

}

);


// Создаем кластеризатор

cluster = new ymaps.Clusterer();

markers = [];

        if (clusterer) clusterer.clearMarkers(); // удаляем маркеры кластера


YMaps.jQuery.getJSON("http://www.voda-st.ru/vivmarkers.php", function(json){ 

if (json.status == 'OK') {  

for (i = 0; i < json.markers.length; i++) {

var placemark = new ymaps.Placemark(

// Координаты

[ json.markers[i].lat, json.markers[i].lon ],

// данные

  {

     // html для отображения в балуне

     balloonContentHeader: json.markers[i].cname,

     balloonContentBody: json.markers[i].glubina

  });

markers.add(placemark);

}  

 

// Добавлеяем массив меток в кластер

cluster.add(markers);

// Добавляем кластер на карту

myMap.geoObjects.add(cluster);

 

}

else

{alert('Произошла ошибка!');}

})    

 


// Добавление стандартного набора кнопок

myMap.controls.add("mapTools")

// Добавление кнопки изменения масштаба 

.add("zoomControl")

// Добавление списка типов карты

.add("typeSelector")

.add("searchControl");


}

 

 

Sergey Konstantinov
28 января 2016, 04:25
markers.add -> markers.push
А так всё правильно.

видимо что-то еще нужно;-(

а вот код старого пашет, правда там кластер другой (не от яндекса)

 

 mapglubin.js 

Sergey Konstantinov
28 января 2016, 04:25
Можно увидеть страницу, на которой не пашет новый код?

заметил что даже кнопки не подгружаются - где-то явно косяк

косяк в вызове метода getJSON

YMaps.jQuery.getJSON - это из первого АПИ
замените на $.getJSON
и рекомендую заглядывать в firebug для поиска ошибок

спасибо, хоть панель появилась - с кластером дальше продолжаю поиски.

Вопрос: необходимость в подгрузке отдельной jQuery отпадает? 

наоборот появляется

в АПИ2 jQuery нет

мля, ну я хоть убей не могу понять, по чему не кластер с метками не появляется?

куда копать хз

 еще раз

и рекомендую заглядывать в firebug для поиска ошибок

Поставь breakpoint внутри обработчика загрузки своего json, и увидишь что скрипт туда не попадает.

Возможно потому что ты выставил неправильный content-type