Клуб API Карт

Для чайников

UPT-CHEL
28 октября 2009, 11:08

Я вообще не программист, все делаю по шаблонам и конструкторам. Очень нужна карта. Сделал с помощью визарта - 

<script type="text/javascript">
window.onload = function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(60.618809,56.842324), 12, YMaps.MapType.MAP);
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.setType(YMaps.MapType.MAP);

var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle();
s.iconStyle.offset = new YMaps.Point(-8,-27);
s.iconStyle.href = "http://api-maps.yandex.ru/i/0.3/icons/buildings.png";
s.iconStyle.size = new YMaps.Point(28,29);
YMaps.Styles.add("wizard#lbmPoint", s);


var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle();
s.iconStyle.offset = new YMaps.Point(-7,-19);
s.iconStyle.href = "http://api-maps.yandex.ru/i/0.3/icons/buildings.png";
s.iconStyle.size = new YMaps.Point(19,20);
YMaps.Styles.add("wizard#gns1Point", s);

var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle();
s.iconStyle.offset = new YMaps.Point(-7,-19);
s.iconStyle.href = "http://api-maps.yandex.ru/i/0.3/icons/buildings.png";
s.iconStyle.size = new YMaps.Point(19,20);
YMaps.Styles.add("wizard#gns2Point", s);

var placemark1 = new YMaps.Placemark(new YMaps.GeoPoint(60.589794,56.849802), {hasBalloon: 0,style: "wizard#lbmPoint", balloonOptions: {maxWidth: 300}});
map.addOverlay(placemark1);
var placemark2 = new YMaps.Placemark(new YMaps.GeoPoint(60.615962,56.826862), {style: "wizard#gns1Point", balloonOptions: {maxWidth: 300}});
map.addOverlay(placemark2);
placemark2.setBalloonContent("Гостиница Атриум ПАЛАС Отель, Екатеринбург");
var placemark3 = new YMaps.Placemark(new YMaps.GeoPoint(60.620696,56.840818), {style: "wizard#gns2Point", balloonOptions: {maxWidth: 300}});
map.addOverlay(placemark3);
placemark3.setBalloonContent("Гостиницы Исеть. Ссылка <br>http://сайт/subjects/viewpage/pageid/557");
}
</script>

 


Помогите пожалуйста не спецу, 

1. Надо чтобы в балунах была ссылка на страницу сайта

2. Чтобы была поисковая строка для поиска по этой карте


Если можете, напишите, пожалуйста прямо сюда код. Премного благодарен.

27 комментариев
Подписаться на комментарии к посту
1. В метод setBalloonContent() можно передать любой html. Например,
placemark1.setBalloonContent('http://clubs.ya.ru/mapsapi/">Клуб разработчиков API Яндекс.Карт');
2. Добавьте строчку
map.addControl(new YMaps.SearchControl());
Спасибо за отклик. Со ссылками все получилось, а вот поле поиска не отображается... пробовал везде втыкать строку.... После чего ее надо вставить?
Нужно вставлять после создания объекта карты.

Если не получится это сделать самостоятельно, то дайте ссылку на страницу?
Вставляю строку - то одно исчезнет, то другое... где-то конфликт... вот ссылка  Гостиницы Екатеринбурга на карте города 
и еще сразу: вот такой код  var s = new YMaps.Style(); s.iconStyle = new YMaps.IconStyle(); s.iconStyle.offset = new YMaps.Point(-7,-19); s.iconStyle.href = "http://сайт/iconmap.png"; s.iconStyle.size = new YMaps.Point(32,37); повторяется будет у каждого места. Нельзя ли это как-то одним разом написать, чтобы для всех действовало?
Можно добавить объекты в группу и задать стиль для группы. Подробнее о стилях можно почитать в статье.

Однако в Вашем случае содержимое балуна у меток очень похожее и у них различается только название гостиницы и часть ссылки. Можно создать шаблон для содержимого балуна, который будет содержать всю общую часть верстки. Подробнее о шаблонах можно прочитать в Руководстве разработчика.

В итоге Ваш код можно сделать вот таким:
window.onload = function () {     
    var map = new YMaps.Map(document.getElementById("YMapsID"));
  
    map.setCenter(new YMaps.GeoPoint(60.618809,56.842324), 13, YMaps.MapType.MAP);

    // Добавляем элементы управления
    map.addControl(new YMaps.ToolBar());        // Панель инструментов
    map.addControl(new YMaps.Zoom());           // Элемент масштабирования
    map.addControl(new YMaps.TypeControl());    // Переключатель типов карт
    map.addControl(new YMaps.SearchControl());  // Поиск

    // Создаем группу и задаем ей пользовательский стиль
    var group = new YMaps.GeoObjectCollection({
        // Стиль для значка метки
        iconStyle : {
            href : "http://s-hotel.ru/iconmap.png",
            size : new YMaps.Point(32,37),
            offset : new YMaps.Point(-16,-34)
        },
       
        // Стиль для содержимого балуна
        balloonContentStyle : {
            template : new YMaps.Template('\
                http://s-hotel.ru/themes/SeaBreeze/images/bullet-hover.gif" width="11" height="9"/> см. \
                http://s-hotel.ru/subjects/viewpage/pageid/$[id]/">$[name]\
            ')
        }
    }),

        // Объекты
        objects = [
            {point : new YMaps.GeoPoint(60.615962,56.826862), id : 556, name : "Гостиница Атриум ПАЛАС Отель"},
            {point : new YMaps.GeoPoint(60.620696,56.840818), id : 557, name : "Гостиница «Исеть»"},
            {point : new YMaps.GeoPoint(60.600987,56.827724), id : 558, name : "Мини-отель «Магистр»"},
            {point : new YMaps.GeoPoint(60.612665,56.838917), id : 631, name : "Гостиница «Гранд-Авеню»"}
        ]

    for (var i = 0, l = objects.length; i < l; i++) {
        // Создаем метки и добавляем их в группу
        (function (obj) {
            var placemark = new YMaps.Placemark(obj.point);
            placemark.id = obj.id;
            placemark.name = obj.name;
            group.add(placemark);
        })(objects[i])
    }
    // Добавляем группу на карту
    map.addOverlay(group);
}

Если будет что-то непонятно - пишите.
Да, я так не смогу, Вам спасибо. Но скопировал код - вставил, метки и балуны пропали.... не могу понять почему. Ключ в хидере шаблона. Контент -  http://api.yandex.ru/maps/tools/constructor/" style="color:#1A3DC1">Создано с помощью инструментов Яндекс.Карт

Вот что вставил. Ну никак....
и строки поиска так и нет
А может дадите ссылку на страницу?
Извините, просмотрел, что у Вас подключается версии 1.0.

Элемента управления "Поиск на карте" доступен только в версии 1.1. Подключите более новую версию и все заработает.
а как подключить?
В строчке
Заменить "1.0" на "1.1".

Все отображается классно. Есть ли такая возможность, чтобы пользователь после результатов поиска мог поставить свою точку, а затем измерить расстояние? Как сдвинуть в нужное место поисковую строку?
Вот так сделал, но почему то не работает...исчезает строка .. map.addControl(new YMaps.SearchControl(),YMaps.ControlPosition.BOTTOM_LEFT);
 Измерить расстояние можно с помощью инструмента "Линейка", доступного на стандартном элементе управления "Панель инструментов". Также расстояние между двумя точками (объектами класса YMaps.GeoPoint) можно измерить с помощью метода distance().

Для изменения положения элементов управления Вам поможет класса YMaps.ControlPosition. Создайте экземпляр этого класса и передайте в него два параметра: угол карты и смещение относительно угла карты.
map.addControl(new YMaps.SearchControl(), new YMaps.ControlPosition(
    YMaps.ControlPosition.BOTTOM_LEFT, new YMaps.Size(150, 15)
));
Да, так просто и управляемо....спасибо.
Вот еще интересно, прочитал про точный поиск (только по городу - // Область Москвы и Московской области
var moscowBounds = new YMaps.GeoBounds(
    new YMaps.GeoPoint(37.13268871914181, 55.55945544545429), 
    new YMaps.GeoPoint(38.085747336675574, 55.946698202860325)
);
map.addOverlay(new YMaps.Geocoder("победы", {boundedBy : moscowBounds, strictBounds : true, results : 100}));
А где брать для других городов название var? (moscowBounds)?
Область показа для других городов можно получить в результате геокодирования.

Например, область показа города Ростов можно получить следующим образом:
var geocoder = new YMaps.Geocoder("Ростов");

YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
    if (this.length()) {
        // Область показа
        var bounds = this.get(0).getBounds();
       
        // Нижний левый угол области
        alert(bounds.getLeftBottom().toString());

        // Правый верхний угол области
        alert(bounds.getRightTop().toString());
    }else {
        alert("Ничего не найдено")
    }
});
Попробовал, заменил город, но не понял, где указывать координаты углов?  Всплывает окно предупреждение с координатами и по-прежнему ищет везде.....
Я продемонстрировал комментарием выше как можно получить координаты углов (они выводятся алертами). Далее необходимо создать объект класса YMaps.GeoBounds и передать его в конструктор геокодера.
Конструктор класса YMaps.GeoBounds принимает в качестве параметров две точки класса YMaps.GeoPoint. Их координаты Вы можете увидеть в алертах.
Что то я совсем туплю. Вы написали код для Ростова - как я понял, нужно поменять на слово на нужный город, поменял. Вставил код. На карте появляется алерт с координатами, из нужно куда-то в код вставить? Или так пользователь должен видеть...короче запутался.
Все на самом деле просто.

1. Запишем координаты, которые были вывдены с помощью алертов.
Для Ростова они будут такими:
39.404501,47.153392
39.851503,47.368593
2. Создаем область показа:
// Я создал две геоточки с координатами, которые получил на 1ом шаге и
// передал их в конструктор класса YMaps.GeoBounds
var rostovBounds = new YMaps.GeoBounds(new YMaps.GeoPoint(39.404501,47.153392), new YMaps.GeoPoint(39.851503,47.368593));
3. Создаем объект геокодера и передаем в конструктор созданную область.
map.addOverlay(new YMaps.Geocoder("победы", {boundedBy : rostovBounds, strictBounds : true, results : 100}));

Теперь геокодера будет искать "победы" в г. Ростов.
Кое что проясняется.... Вот что я разместил... но ищет все равно и в других областях...
window.onload = function () { var map = new YMaps.Map(document.getElementById("YMapsID")); map.setCenter(new YMaps.GeoPoint(73.348746,54.978674), 12, YMaps.MapType.MAP); var omskBounds = new YMaps.GeoBounds(new YMaps.GeoPoint(72.645634,54.674226), new YMaps.GeoPoint(74.051857,55.280821)); map.addOverlay(new YMaps.Geocoder("я хочу чтобы любые слова искались только в Омске", {boundedBy : omskBounds, strictBounds : true, results : 100}));
Для Омска пока нет подробной карты, поэтому, к сожалению, поиск по улицам не доступен.

По какому поисковому запросу Вы решили, что поиск происходит в других областях?
Да я с Омском понял... там одна оборонка :-) Про Ваш вопрос - как я понял и дела - если слово "победа" - то будет ограничение поиска, а если любое другое - то нет....
Вобщем то проблема решается малой кровью - нужно просто в строке поиска вместо "поиск на карте" написать (частный случай) - "адрес командировки" - у гугл нашел как, а здесь не могу найти... какую строчку надо написать?
На этом, наверное, перестану Вас мучать...  Вобще полезный диалог получился и для меня и для тех, кто с "0" начнет этим заниматься. 
Так как с моим последним вопросом? Как заменить в строке поиска слово "Поиск по карте" на свое???
Огромное спавсибо за Ваше терпение и профессиональную помощь. Уважаю Ваш труд. Успехов Вам и процветания. А мне теперь - 89 карт регионов.