Клуб API Карт

Клуб API Карт

Впервые встраиваю карту в сайт...

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

Коллеги,

Посмотрел документацию, как водится, ничего не понял. Хотя и не мудрено. Если html я знаю, php - совсем кое-как, а javascript - вообще по нулям:-) Вообще туда ли я попал?!:-):-) Но на самом деле, смешно, а сделать как-то нужно.

 

На моем сайте выводится тегом адрес на страницу в результате запроса-поиска. Вот во время этого вывода и формировании страницы я хотел бы как-то сделать так, чтобы этот адрес вставлялся куда надо и выводилась карта с местом объекта.

 

На самом деле, у меня есть тег. Я его могу вставить - в нужное место в скрипте. Не понятно только, какой именно скрипт вставить. В целом - ничего особенного не требуется. Вот стандартный пример:

 

http://api.yandex.ru/maps/jsapi/examples/mapinitgeocoding.html

 

Если выбрать масштаб, то уже это подошло бы, что бы, казалось бы, могло быть проще? Но проблема, собственно говоря, вот в чем: страница результата поиска итегрирована в CMS. Может быть, такой простой вариант и сработал бы, если бы не одно но: там большая часть скрипта идет в head раздел. А, насколько я понимаю, на моей странице шаблона тег {address} загружается уже после. То есть работать не будет (и на практике даже этот простой пример почему-то не работает, если head часть поместить в head шаблон cms, а body в body...

 

Вопрос: неужели нет какого-то готового примера скрипта, вызывающего карту, который бы просто вставлялся на шаблонную страницу и куда вставлялся бы адрес (или тег с динамическим адресом?

 

Вы извините, если вопрос мой совсем глупый - просто я действительно ничего не понимаю в js, но научиться чему-нибудь хочу! (И научусь, видимо, пока поставлю:-) )

9 комментариев
Авторизуйтесь, чтобы оставить комментарий
Александр Новиков
28 января 2016, 08:17
Секцию JavaScript не обязательно в head вставлять.

Можно вставить в любое место.

И для вашей задачи в примере вставляете ваш тег с адресом вместо "Москва". Т.е. должно получится var gc = new YMaps.Geocoder("{address}"); И я бы еще на вашем месте добавил бы следующий код: map.addOverlay(this.get(0)); Это поставит метку для вашего адреса. Т.е. должно получится как-то вот так

<script type="text/javascript">
        window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));

            var gc = new YMaps.Geocoder("{address}");
            YMaps.Events.observe(gc, gc.Events.Load, function () {
                if (this.length()) {
map.addOverlay(this.get(0));                    
map.setBounds(this.get(0).getBounds());
                }
            });
        }
    script>

inmast
28 января 2016, 08:17
Коллега, представляете, я сделал! Американские спецы мучаются, ведут базы долготы-широты в MySQL, а я умудрился сделать так, что в лет при выборе страницы из результатов поиска тут же все показывается на карте:-) Чудеса! Причем я сначала сделал все именно так, как Вы написали, а потом увидел, что Вы мне ответили:-)

Вот только один ворос, может быть, совсем несложный - уже сил нет дальше копаться во всем этом, так хочется закончить, не начиная изучать заново. Вот тот самый классический пример: http://api.yandex.ru/maps/jsapi/examples/mapinitgeocoding.html

Что нужно добавить, чтобы метку поставить на найденное место? Вот эту строчку: map.setBounds(this.get(0).getBounds());
или вот это
map.addOverlay(this.get(0));
что, то есть, отвечает за метку?

Кстати, в Open Realty эти метки можно все подряд поставить на место "Москвы" - и страну, и город, и все такое. Чем больше данных, тем точнее поиск:-) А если поле в базе пустое, то и тег остается пустым - а что этой машине один пробел:-)

Александр Новиков
28 января 2016, 08:17
map.addOverlay(this.get(0)); - ставит метку
map.setBounds(this.get(0).getBounds());  - устанавливает масштаб и область на карте, которая будет выводится на экране...

А америнканские спецы не такие глупые :) По координатам тоже можно поставить метку и это будет быстрей, чем каждый раз использовать геокодирование.

inmast
28 января 2016, 08:17
Александр Новиков
28 января 2016, 08:17
Ну вообще-то хорошим стилем проектирования системы является хранение координат. Даже если у вас агентство недвижимости, то лучше будет один раз, при добавлении записи сделать запрос геокодера и записать в базу координаты. А потом уже показывать точки пользователю по координатам. Так оно заметно быстрей будет работать. А если у вас на карте 50 объектов, то если для каждого объекта каждый раз вызывать геокодер, то большинство ваших пользователей даже не дождется пока карта полностью загрузиться.

А что бы цвет флажка поменять, смотрите примеры для JavaScript API - там это есть.
rodlex
28 января 2016, 08:17
Цвет значка метки несложно поменять.
Для этого в конструктор класса метки нужно передать либо указатель на стиль, либо ключ стиля. Также стиль можно поменять с помощью метода setStyle().

В API встроен ряд стандартных значков. Полный список стандартных стилей приведен на странице описания класса YMaps.Styles.

Например, сменим значок у метки на красный цвет:
var placemark = new YMaps.Placemark(map.getCenter(), {style : "default#redPoint"});
или если метка уже создана:
placemark.setStyle("default#redPoint");
inmast
28 января 2016, 08:17

Спасибо! Сделано:-) И уже делюсь с коллегами своим готовым вариантом вставки карты в скрипт Open-Realty :-)

Успехов!

nicfirst
28 января 2016, 08:17

YMaps.Styles.add("constructor#pmlbl1Placemark",

{

iconStyle : { href : "http://api-maps.yandex.ru/i/0.3/placemarks/pmlbl1.png",

size : new YMaps.Point(36,41),

offset: new YMaps.Point(-13,-40)

}

});


скажите, плз, что конкретно нужно сюда вставить чтоб сменить цвет у флажка?




rodlex
28 января 2016, 08:17
Если вы имеете ввиду цвет стандартных меток, то воспользуйтесь готовыми стилями, полный список можно посмотреть в справочнике.

Про задание стиля для метки подробнее здесь:
http://api.yandex.ru/maps/jsapi/doc/dg/tasks/how-to-add-placemark.xml#placemark-style