Клуб API Карт

Как прикрутить поиск?

Пост в архиве.
grey4eg
27 марта 2013, 09:10

Добрый день. У меня карта выводится так (содержимое берется из XML-фала. Попутно формируется меню и метки на карте):

<script type="text/javascript">
        window.onload = function () {
            ymaps.ready(function () {

                // Создание экземпляра карты
                var myMap = new ymaps.Map('map', {
<?php
if (isset($_GET['target'])) {
$coord = $_GET['target'];
echo  "center: [$coord],";
} else {
echo "center: [58.217741,68.274624],";
}
?>
                 
            zoom: 16,
            type: "yandex#publicMap"
                });

                myMap.controls.add('zoomControl')
               .add(new ymaps.control.TypeSelector(['yandex#satellite', 'yandex#publicMap', 'yandex#publicMapHybrid']));

       // Загрузка файла
                ymaps.geoXml.load("../../../menufromymapsml.xml")
                        .then(function (res) {
                            res.geoObjects.each(function (item) {
                                addMenuItem(item, myMap);
                                   
                            });
                      $("a.title").click();
                        },
                        function (error) {  
                            alert("При загрузке YMapsML-файла произошла ошибка: " + error);
                        });

                   }); //ymaps.ready(function
           

        } //window.onload
       
  function addMenuItem(group, map) {
                // Показать/скрыть группу геообъектов на карте
                    $("<a class=\"title\" href=\"#\">" + group.properties.get('name') + "</a>")
                        .bind("click", function () {
                         var link = $(this);
                             // Если пункт меню "неактивный", то добавляем группу на карту,
                            // иначе - удаляем с карты
                            if (link.hasClass("active")) {
                                map.geoObjects.remove(group);
                                link.addClass("inactive");
                            } else {
                                map.geoObjects.add(group);
                                link.removeClass("inactive");
                            }
                            // Меняем "активность" пункта меню
                            link.toggleClass("active");
                            return false;
                        })
                        // Добавление нового пункта меню в список
                        .appendTo(
                            $("<li></li>").appendTo($("#menu")));
                }
  
 </script>

Мне же нужно прикрутить к этому поиск лишь по одному городу, как в примере http://api.yandex.ru/maps/doc/jsapi/2.x/examples/searchform.html, но я не могу понять, в какое место нужно вставить (и нужно ли) код

myCollection = new ymaps.GeoObjectCollection();

            $('#search_form').submit(function () {
                var search_query = $('input:first').val();

                ymaps.geocode(search_query, {results: 100}).then(function (res) {
                    myCollection.removeAll();
                    myCollection = res.geoObjects;
                    myMap.geoObjects.add(myCollection);
                });
                return false;
            });

Так, чтобы поиск заработал.Пробовал вставлять в тело ymaps.ready(function (), но результатов это не дало.

Форма поиска:

 
<form id="search_form"><input type="text" value="Название города" style="width: 580px;"/><input type="submit" value="Найти"/></form>
6 комментариев

посмотрите этот пример

Так и про этот пример и говорю - пробую вписать его в это место:

                    zoom: 16,
            type: "yandex#publicMap"
                }),
           myCollection = new ymaps.GeoObjectCollection();

            $('#search_form').submit(function () {
                var search_query = $('input:first').val();

                ymaps.geocode(search_query, {results: 100}).then(function (res) {
                    myCollection.removeAll();
                    myCollection = res.geoObjects;
                    myMap.geoObjects.add(myCollection);
                });
                return false;
            });

          
                //Добавление кнопки изменения масштаба
                myMap.controls.add('zoomControl').add(new ymaps.control.TypeSelector(['yandex#satellite', 'yandex#publicMap', 'yandex#publicMapHybrid']));

результата никакого, причем карта со всеми метками и навигацией работает нормально.

а в консоли ошибок javascript есть что-нибудь?

лучше давать сразу ссылку на свою страницу

Спасибо, заработало. Был конфликт с "родной" формой поиска по сайту. Что странно, поскольку id нигде не дублируются.

Возникла проблема другого рода - Есть две улицы Ленина, одна большая и красивая, вторая длиной  в три дома, в пригородном поселке. При поиске выдается именно маленькая Ленина, а центральная совершенно игнорируется. Как это можно объяснить?

создайте, плжста, отдельную тему в клубе.

Когда закончите, присылайте ссылку на свой проект. Мы собираем примеры для галереи :-)