Как вывести точки на яндекс карте на основании json файла?

#javascript #яндекс #yandex_maps_api

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

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


}

Вывожу так:



    


    
    
	
    	












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

Ответы

Ответ 1

Вот пример 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: [
            '
',
            '
Данные
',
            'Данные: МО "Название МО"
',
            'Данные: ФИО Главы МО
',
            '
'
          ].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
    });
  })
}


Ответ 2

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, "Место вашего предположительного местоположения:
"
                + (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);
    });
    
        
            
            
        
        
            

        
    




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