Клуб API Карт

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

glibru
27 декабря 2010, 00:04

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

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

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

 <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 комментариев
Подписаться на комментарии к посту
// По завершению геокодирования инициализируем карту первым результатом
Туда же добавьте и остальное рисование карты.
Хотя зачем вам геокодирование точки координаты которой известны?

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

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

В консоле ошибок в firebug - пусто.
Если вы хотите центрировать карту по Москве, то не нужно каждый раз геокодировать. Вам достаточно воспользоваться инструментом Определение координат и получить нужные координаты и масштаб для той области, которую вы хотите показать.
Например, для Москвы координаты будут: 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;
    }
});
Про коллекции спасибо.
Но, вопрос стоит именно в добавлении данных уже после создания карты.
Тоесть я подгружаю доп. данные через ajax и мне необходимо добавить их на карту... которая уже до этого существовала..
Делаете group глобальным (можно просто var стереть около объявления переменной), и когда подгрузите данные через ajax добавляйте их в группу.
Вот такая фишка не срабатывает:


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


            

            



    
        

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

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

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

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

   



   
   
Большое спасибо, работает -)