1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Установка и настройка

Онлайн карта с поиском

Главные вкладки

Комментарии

Аватар пользователя xSPiRiTx xSPiRiTx 3 апреля 2013 в 21:54

нету никакой БД, поэтому и ищу готовые примеры онлайн карт типа яндекса. Какая карта нужна я в первом посту написал.
Пробую с api яндекса собрать, да нихрена не выходит у меня.

Аватар пользователя xSPiRiTx xSPiRiTx 3 апреля 2013 в 22:10

короче без знаний программирования не обойтись.
Тыкал сегодня весь день, так и не натыкал.

http://api.yandex.ru/maps/tools/constructor/
вот готовая карта. Сразу показала мне мой город с улицами..и сразу есть поле поиска по улицам. Вот ее бы вместе с этим поиском и встроить на сайт

Аватар пользователя xSPiRiTx xSPiRiTx 4 апреля 2013 в 1:47

вот это вот определяет по IP локацию, показывает автоматически твой город

    <script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);

function init() {
    // Данные о местоположении, определённом по IP
    var geolocation = ymaps.geolocation,
    // координаты
        coords = [geolocation.latitude, geolocation.longitude],
        myMap = new ymaps.Map('map', {
            center: coords,
            zoom: 10
        });

    myMap.geoObjects.add(
        new ymaps.Placemark(
            coords,
            {
                // В балуне: страна, город, регион.
                balloonContentHeader: geolocation.country,
                balloonContent: geolocation.city,
                balloonContentFooter: geolocation.region
            }
        )
    );
}
</script>

    <div id="map" style="width:100%; height:500px"></div>

остается добавить кнопки масштабирования (сейчас просто по двойному клику, а хотелось бы кнопки дополнительно для понятности) и поиск

Аватар пользователя xSPiRiTx xSPiRiTx 4 апреля 2013 в 1:51

это уже карта, определяющая автоматом твое местоположение, и имеет кнопки масштабирования, управления и т.п.

    <script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);

function init() {
    // Данные о местоположении, определённом по IP
    var geolocation = ymaps.geolocation,
    // координаты
        coords = [geolocation.latitude, geolocation.longitude],
        myMap = new ymaps.Map('map', {
            center: coords,
            zoom: 10
        });

  myMap.controls
        // Кнопка изменения масштаба.
        .add('zoomControl', { left: 5, top: 5 })
        // Список типов карты
        .add('typeSelector')
        // Кнопка изменения масштаба - компактный вариант.
        // Расположим её справа.
        .add('smallZoomControl', { right: 5, top: 75 })
        // Стандартный набор кнопок
        .add('mapTools', { left: 35, top: 5 });

    myMap.geoObjects.add(
        new ymaps.Placemark(
            coords,
            {
                // В балуне: страна, город, регион.
                balloonContentHeader: geolocation.country,
                balloonContent: geolocation.city,
                balloonContentFooter: geolocation.region
            }
        )
    );
}
</script>

    <div id="map" style="width:100%; height:500px"></div>

Аватар пользователя xSPiRiTx xSPiRiTx 4 апреля 2013 в 23:12

2ГИС мне просто внешне больше понравились...но их API я вообще не осилил...либо просто не догнался, потому что долго не ковырял

Аватар пользователя xSPiRiTx xSPiRiTx 5 апреля 2013 в 2:12

Благодаря пользователю deadrash с форума htmlbook.ru карта была таки собрана:

    <script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init() {
        // Данные о местоположении, определённом по IP
        var geolocation = ymaps.geolocation,
        // координаты
                coords = [geolocation.latitude, geolocation.longitude],
                bounds = [
                    [geolocation.latitude -1, geolocation.longitude -1]
                    , [geolocation.latitude +1, geolocation.longitude +1]
                ], //Определяем границу поиска текущими координатами
                res,
                timeOut,
                searchField = document.getElementById('search')
        ;
        searchField.onkeyup = getVal;
   
                myMap = new ymaps.Map('map', {
                        center: coords,
                        zoom: 10
                });
  myMap.controls
                // Кнопка изменения масштаба.
                .add('zoomControl', { left: 5, top: 5 })
                // Список типов карты
                .add('typeSelector')
                // Кнопка изменения масштаба - компактный вариант.
                // Расположим её справа.
                .add('smallZoomControl', { right: 5, top: 75 })
                // Стандартный набор кнопок
                .add('mapTools', { left: 35, top: 5 });
       
   
    function getVal() {
        clearTimeout(timeOut);
                timeOut = setTimeout(function(){
                        searchAddr(searchField.value);
                }, 300);
    }
   
    function searchAddr(addr) {
        // Поиск координат
                var myGeocoder = ymaps.geocode(
                        addr,
                        {
                                  boundedBy: bounds
                                , strictBounds: false
                                , results: 1
                        }
                );
                myGeocoder.then(
                        function (dot) {
                                //удаляем предыдущие метки
                                res && myMap.geoObjects.remove(res.geoObjects);
                                res = dot;

                                // Выбираем первый результат геокодирования.
                                var firstGeoObject = res.geoObjects.get(0);

                                // Движемся к результату поиска
                                myMap.setCenter(
                                        firstGeoObject.geometry.getCoordinates(),
                                        16,
                                        {
                                                  duration: 400
                                                , delay: 0
                                                , checkZoomRange: true
                                                , timingFunction: 'ease-in-out'
                                        }
                                );

                                // Задаем изображение для иконок меток.
                                res.geoObjects.options.set('preset', 'twirl#carIcon');
                                // Добавляем полученную метку на карту.
                                myMap.geoObjects.add(res.geoObjects);
                        }
                        // ,
                        // function (err) {
                        //      alert('Ошибка');
                        // }
                );
    }
   
}
</script>
    <div id="map" style="width:100%; height:500px">Поиск на карте: <form action="" method="post" onsubmit="return false;"><input type="text" id="search"></form></div>

Аватар пользователя Mitich Mitich 13 октября 2013 в 13:55

все работает, но не понимаю зачем искать "Ек", "Ека", "Екатер", "Екатерин"....глупо запускать скрипт по вводу букв, и видеть как все меняется при каждом нажатии, почему нельзя было сделать просто по нажатию кнопки "Искать". Думайте так не логичнее???