3

День добрый! Например, вот json файл data.json

{
"Points":[{
    "MapPoinName": "Город 1",
    "MapPointPopulation": 125000,
    "MapPointCoordinates": "58.211748, 59.979321"
}, {
    "MapPoinName": "Город 2",
    "MapPointPopulation": 105000,
    "MapPointCoordinates": "51.221748, 53.929321"
}]

}

Вывожу так:

    <!DOCTYPE html>
<html>
<head>
    <title>Карта возможностей и проблем</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
    	<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0; border: 2px red;
        }
		</style>
</head>

<body>
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">

ymaps.ready(init);
function init () {
    var map = new ymaps.Map("map", {
            center: [55.76, 37.57],
            zoom: 5,
            controls: ['zoomControl','searchControl']
        });
// создадим массив геообъектов
myGeoObjects = [];

$.getJSON('data.json', function(data) {
	//console.log(data);
	for (var i = 0; i < data.Points.length; i++) {
		myGeoObjects[0] = new ymaps.GeoObject({
    geometry: {type: "Point", coordinates: [57.211748, 52.979321]},
    properties: {
        clusterCaption: 'Описание в кластере',
        balloonContentBody: [
            '<address style="font-style: normal">',
            '<h3>Данные</h3>',
            '<b>Данные: </b>МО "Название МО"<br>',
            '<b>Данные: </b>ФИО Главы МО<br>',
            '</address>' ].join('')
    }
    },
    {// Задаем пресет метки с точкой без содержимого.
    preset: "islands#darkGreenDotIcon",
});
	}
});
// создадим кластеризатор и запретим приближать карту при клике на кластеры
clusterer = new ymaps.Clusterer({preset: 'islands#invertedDarkGreenClusterIcons', clusterDisableClickZoom: true, clusterBalloonContentLayoutWidth: 800, clusterBalloonLeftColumnWidth: 160});
clusterer.add(myGeoObjects);
map.geoObjects.add(clusterer);
//Спозиционируем карту так, чтобы на ней были видны все объекты
map.setBounds(clusterer.getBounds(), { checkZoomRange: true});
}
</script>
<div id="map"></div>
</body>
</html>

Данные из json получаю, но код внутри for (var i = 0; i < data.Points.length; i++) не выполняется

6
  • Что значит не выполняется? не входит в цикл или же другая ошибка?
    – alexoander
    30 мая 2017 в 10:23
  • В консоли : TypeError: n is null
    – rud99
    30 мая 2017 в 10:54
  • 1
    только что запустил код, работает. А Вы точно получаете json в ответе? попробуйте в консоли вывести console.log(data.Points[0].MapPoinName); 30 мая 2017 в 10:55
  • @MrFylypenko? у Вас вышло 2 точки? Координаты в примере одинаковые, должно быть 2 точки в одном месте.
    – rud99
    30 мая 2017 в 11:02
  • визуально вижу только 1 точку 30 мая 2017 в 11:31

2 ответа 2

6

Yandex api Maps имеет вот такую хорошую функцию addOverlay при помощи которой можно добавить точки на карте.

Сделал стандартную инициализацию yandex api maps первой точкой сделал текущую геопозицию пользователя, Потом после парсинга json данных циклом проходим по нему и добовляем наши метки на карте, после добавления всех меток рисуем карту с заданными данными.

var points_json = '{"Points":[{"MapPoinName": "Город 1","MapPointPopulation": 125000,"MapPointCoordinates": "58.211748, 59.979321"}, {"MapPoinName": "Город 2","MapPointPopulation": 105000,"MapPointCoordinates": "51.221748, 53.929321"}]}';
    var points = $.parseJSON(points_json);
    // Создание обработчика для события window.onLoad
    YMaps.jQuery(function () {
        // Создание экземпляра карты и его привязка к созданному контейнеру
        var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]),

            // Центр карты
            center,

            // Масштаб
            zoom = 10;

        // Получение информации о местоположении пользователя
        if (YMaps.location) {
            center = new YMaps.GeoPoint(YMaps.location.longitude, YMaps.location.latitude);

            if (YMaps.location.zoom) {
                zoom = 3;
            }

            map.openBalloon(center, "Место вашего предположительного местоположения:<br/>"
                + (YMaps.location.country || "")
                + (YMaps.location.region ? ", " + YMaps.location.region : "")
                + (YMaps.location.city ? ", " + YMaps.location.city : "")
            )
        }else {
            center = new YMaps.GeoPoint(37.64, 55.76);
        }
        for(var i=0;i < points.Points.length;i++){
            var tmp_points = points.Points[i]['MapPointCoordinates'].split(', ');

            var placemark = new YMaps.Placemark(new YMaps.GeoPoint(tmp_points[0],tmp_points[1]));

                placemark.description = "point "+i+" description";
                map.addOverlay(placemark);

            center = new YMaps.GeoPoint(tmp_points[0], tmp_points[1]);

        }
        // Рисуем карту
        map.setCenter(center, zoom);
    });
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
            <script charset="utf-8" src="https://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>
        </head>
        <body>
            <div style="width:600px;height:400px" id="YMapsID" class="YMaps YMaps-cursor-grab"></div>
        </body>
    </html>

Более подробно об этом можете прочитать здесь.

2

Вот пример JavaScript кода для вывода точек с кластеризацией:

ymaps.ready(init);

function init() {
  var map = new ymaps.Map("map", {
    center: [55.76, 37.57],
    zoom: 5,
    controls: ['zoomControl', 'searchControl']
  });
  $.getJSON('data.json', function(data) {
    // Создадим объект точек из data.Points
    var myGeoObjects = data.Points.map(item => {
      return new ymaps.GeoObject({
        geometry: {
          type: "Point",
          // Переведем строку с координатами в массив
          coordinates: item.MapPointCoordinates.split(', ')
        },
        properties: {
          clusterCaption: 'Описание в кластере',
          balloonContentBody: [
            '<address style="font-style: normal">',
            '<h3>Данные</h3>',
            '<b>Данные: </b>МО "Название МО"<br>',
            '<b>Данные: </b>ФИО Главы МО<br>',
            '</address>'
          ].join('')
        }
      }, {
        preset: "islands#darkGreenDotIcon",
      });
    })
    // Создадим кластеризатор после получения и добавления точек
    var clusterer = new ymaps.Clusterer({
      preset: 'islands#invertedDarkGreenClusterIcons',
      clusterDisableClickZoom: true,
      clusterBalloonContentLayoutWidth: 800,
      clusterBalloonLeftColumnWidth: 160
    });
    clusterer.add(myGeoObjects);
    map.geoObjects.add(clusterer);
    map.setBounds(clusterer.getBounds(), {
      checkZoomRange: true
    });
  })
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.