Клуб API Карт

Клуб API Карт

Добавление объектов на карту

Пост в архиве.

Здравствуйте. Требуется помощь.

В начале я создаю карту, с центром в Москве, затем пытаюсь добавить туда данные..

Тоесть мне необходимо добавить данные в уже сгенерированную карту.. и не выходит.

 <html>
            <title>Тестирование карты</title>
            <head>
<script src=\"http://api-maps.yandex.ru/1.1/index.xml?key=$yandexKEY\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {

// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery(\"#YMapsID\")[0]);
var points = [];

// Создание объекта геокодера
var geocoder = new YMaps.Geocoder(\"Москва\");

// По завершению геокодирования инициализируем карту первым результатом
YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {
    if(geocoder.length()) {
         map.setBounds(geocoder.get(0).getBounds());
       }
 });
});
</script>
            </head>

            <body>
<div id=\"YMapsID\" style=\"width: 698px; height:464px;\"></div>
<script type=\"text/javascript\">
var point = new YMaps.GeoPoint(37.678020, 55.579449);
points.push(point);
var placemark = new YMaps.Placemark(point, {style: \"default#redSmallPoint\"});
placemark.name = \"Дворик  кафе\";
placemark.setIconContent('1');
map.addOverlay(placemark);
var point = new YMaps.GeoPoint(37.447063, 55.834871);
points.push(point);
var placemark = new YMaps.Placemark(point, {style: \"default#redSmallPoint\"});
placemark.name = \"Кальян кафе на Вишневой 13\";
lacemark.setIconContent('2');
map.addOverlay(placemark);
var point = new YMaps.GeoPoint(37.496021, 55.804223);
points.push(point);
var placemark = new YMaps.Placemark(point, {style: \"default#redSmallPoint\"});
placemark.name = \"Гриль бар  Буффало \";
placemark.setIconContent('3');
map.addOverlay(placemark);
var point = new YMaps.GeoPoint(37.714429, 55.753950);
points.push(point);
var placemark = new YMaps.Placemark(point, {style: \"default#lightblueSmallPoint\"});
placemark.name = \"SHOT\";
placemark.setIconContent('4');
map.addOverlay(placemark);
var point = new YMaps.GeoPoint(37.544162, 55.641727);
points.push(point);
var placemark = new YMaps.Placemark(point, {style: \"default#lightblueSmallPoint\"});
placemark.name = \"БАМБУК\";
placemark.setIconContent('5');
map.addOverlay(placemark);
var point = new YMaps.GeoPoint(37.803937, 55.793551);
points.push(point);
var placemark = new YMaps.Placemark(point, {style: \"default#lightblueSmallPoint\"});
placemark.name = \"БОЧКА \";
placemark.setIconContent('6');
map.addOverlay(placemark);
var point = new YMaps.GeoPoint(37.573097, 55.894833);
points.push(point);
var placemark = new YMaps.Placemark(point, {style: \"default#lightblueSmallPoint\"});
placemark.name = \"ВИКИНГ\";
placemark.setIconContent('7');
map.addOverlay(placemark);
var point = new YMaps.GeoPoint(37.767519, 55.700141);
points.push(point);

map.redraw();
</script>
    </body>
        </html>

Подскажите пожалуйста, в чём проблема?

8 комментариев
Авторизуйтесь, чтобы оставить комментарий
Andrey.Cjkjvfnby
28 января 2016, 06:38
// По завершению геокодирования инициализируем карту первым результатом
Туда же добавьте и остальное рисование карты.
Хотя зачем вам геокодирование точки координаты которой известны?

Не забудьте заглянуть в консоль ошибок джаваскрипта(рекомендую firefix+firebug) если что -то не работает, часто ответ кроется именно там.

Гляньте в документации про коллекции объектов, это намного упросит ваш код.

glibru
28 января 2016, 06:38
В консоле ошибок в firebug - пусто.
rodlex
28 января 2016, 06:38
Если вы хотите центрировать карту по Москве, то не нужно каждый раз геокодировать. Вам достаточно воспользоваться инструментом Определение координат и получить нужные координаты и масштаб для той области, которую вы хотите показать.
Например, для Москвы координаты будут: 37.609218,55.753559
Обзорный масштаб для всей москвы можно выбрать либо 9, либо 10.

По поводу группы Андрей вам правильно подсказывает. Код будет гораздо короче и понятнее. Примерно такой:
YMaps.jQuery(function () {
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
    map.setCenter(new YMaps.GeoPoint(37.609218, 55.753559), 10);

    var group = new YMaps.GeoObjectCollection("default#redPoint");
    YMaps.Events.observe(group, group.Events.Add, function (group, obj, index) {
        obj.setIconContent(group.length());
    });
    group.add([
        createPlacemark(new YMaps.GeoPoint(37.678020, 55.579449), "Дворик  кафе"),
        createPlacemark(new YMaps.GeoPoint(37.447063, 55.834871), "Кальян кафе на Вишневой 13"),
        createPlacemark(new YMaps.GeoPoint(37.496021, 55.804223), "Гриль бар  Буффало"),
        createPlacemark(new YMaps.GeoPoint(37.714429, 55.753950), "SHOT"),
        createPlacemark(new YMaps.GeoPoint(37.544162, 55.641727), "БАМБУК"),
        createPlacemark(new YMaps.GeoPoint(37.803937, 55.793551), "БОЧКА"),
        createPlacemark(new YMaps.GeoPoint(37.573097, 55.894833), "ВИКИНГ"),
    ]);
    map.addOverlay(group);

    function createPlacemark (point, name) {
        var placemark = new YMaps.Placemark(point);
        placemark.name = name;

        return placemark;
    }
});
glibru
28 января 2016, 06:38
Про коллекции спасибо.
Но, вопрос стоит именно в добавлении данных уже после создания карты.
Тоесть я подгружаю доп. данные через ajax и мне необходимо добавить их на карту... которая уже до этого существовала..
rodlex
28 января 2016, 06:38
Делаете group глобальным (можно просто var стереть около объявления переменной), и когда подгрузите данные через ajax добавляйте их в группу.
glibru
28 января 2016, 06:38
Вот такая фишка не срабатывает:


            Тестирование карты
            


            

            



    
        

Точки в центре Москвы не видно.. её нету..
rodlex
28 января 2016, 06:38
Группа создается после загрузки DOM, поэтому вот этот код:

    group.add([
        createPlacemark(new YMaps.GeoPoint(37.609218, 55.753559), \"Точка в центре Москвы\"),
    ]);

у вас вызывает ошибку. К тому же функция createPlacemark объявлена внутри обработчика события window.onload, поэтому она не видна в глобальной области видимости.

В этом случае вынесите создание группы и функцию createPlacemark за пределы обработчика события onload.

   



   
   
glibru
28 января 2016, 06:38
Большое спасибо, работает -)