Клуб API Карт

Клуб API Карт

Для чайников

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

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

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

Если не получится это сделать самостоятельно, то дайте ссылку на страницу?
Валерий
28 января 2016, 08:14
Вставляю строку - то одно исчезнет, то другое... где-то конфликт... вот ссылка  Гостиницы Екатеринбурга на карте города 
Валерий
28 января 2016, 08:14
и еще сразу: вот такой код  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); повторяется будет у каждого места. Нельзя ли это как-то одним разом написать, чтобы для всех действовало?
rodlex
28 января 2016, 08:14
Можно добавить объекты в группу и задать стиль для группы. Подробнее о стилях можно почитать в статье.

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

В итоге Ваш код можно сделать вот таким:
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);
}

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

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

Элемента управления "Поиск на карте" доступен только в версии 1.1. Подключите более новую версию и все заработает.
Валерий
28 января 2016, 08:14
а как подключить?
rodlex
28 января 2016, 08:14
В строчке
Заменить "1.0" на "1.1".

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

Для изменения положения элементов управления Вам поможет класса YMaps.ControlPosition. Создайте экземпляр этого класса и передайте в него два параметра: угол карты и смещение относительно угла карты.
map.addControl(new YMaps.SearchControl(), new YMaps.ControlPosition(
    YMaps.ControlPosition.BOTTOM_LEFT, new YMaps.Size(150, 15)
));
Валерий
28 января 2016, 08:14
Да, так просто и управляемо....спасибо.
Валерий
28 января 2016, 08:14
Вот еще интересно, прочитал про точный поиск (только по городу - // Область Москвы и Московской области
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)?
rodlex
28 января 2016, 08:14
Область показа для других городов можно получить в результате геокодирования.

Например, область показа города Ростов можно получить следующим образом:
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("Ничего не найдено")
    }
});
Валерий
28 января 2016, 08:14
Попробовал, заменил город, но не понял, где указывать координаты углов?  Всплывает окно предупреждение с координатами и по-прежнему ищет везде.....
rodlex
28 января 2016, 08:14
Я продемонстрировал комментарием выше как можно получить координаты углов (они выводятся алертами). Далее необходимо создать объект класса YMaps.GeoBounds и передать его в конструктор геокодера.
Конструктор класса YMaps.GeoBounds принимает в качестве параметров две точки класса YMaps.GeoPoint. Их координаты Вы можете увидеть в алертах.
Валерий
28 января 2016, 08:14
Что то я совсем туплю. Вы написали код для Ростова - как я понял, нужно поменять на слово на нужный город, поменял. Вставил код. На карте появляется алерт с координатами, из нужно куда-то в код вставить? Или так пользователь должен видеть...короче запутался.
rodlex
28 января 2016, 08:14
Все на самом деле просто.

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}));

Теперь геокодера будет искать "победы" в г. Ростов.
Валерий
28 января 2016, 08:14
Кое что проясняется.... Вот что я разместил... но ищет все равно и в других областях...
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}));
rodlex
28 января 2016, 08:14
Для Омска пока нет подробной карты, поэтому, к сожалению, поиск по улицам не доступен.

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