Клуб API Карт

Помогите написать скрипт отображения карты

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

Всем привет!

Уже вторая неделя как длятся мои мучения - не получается написать скрипт отображения карты.

Смысл такой - пользователь вводит в input адрес - в контейнере map должна отобразится карта с центром адреса. Причем отображение должно быть через метод panto.

Если пользователь вводит другой адрес - соответственно должна отобразится карта с новым адресом. Все это без перезагрузки страницы и через panto.

Подскажите как это сделать?????

13 комментариев
Всеволод Шмыров
28 января 2016, 02:07

А есть какие-нибудь наработки? 

 

OlegOlegOlegOleg1980
28 января 2016, 02:07

есть стандартный скрипт. Он отрисовывает карту нормально. но мне нужно чтобы еще было перемещение panto

 

ymaps.ready(init);

function init() 

{    

    ymaps.geocode('', { results: 1 }).then

(

function (res)// Поиск координат по адресу 

{        

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

            myMap = new ymaps.Map// Создаем карту с нужным центром

("map",  

center: firstGeoObject.geometry.getCoordinates(),

zoom: 16// Исходный масштаб

}

);

var myPlacemark = new ymaps.Placemark// Создаем метку с найденными координатами

(

firstGeoObject.geometry.getCoordinates(),

{

iconContent: 'Наш адрес'// Надпись на метке

},

{

preset: 'twirl#redStretchyIcon'// Красная растягивающаяся метка

}

);

myMap.geoObjects

.add(myPlacemark);

 

myMap.controls        

.add('zoomControl', { left: 1, top: 1 })// Кнопка изменения масштаба        

.add('typeSelector');// Список типов карты

}, 

function (err) 

{        

        alert(err.message);// Если геокодирование не удалось, сообщаем об ошибке

}

);

 

}

Всеволод Шмыров
28 января 2016, 02:07

Ну нужно по какому-нибудь событию (клик по button или клавиши Enter) запрашивать у геокодера координаты и по этим координатам производить смещение карты.

Мне не очень в вашем вопросе понятно - вам нужна именно новая карта? Если новая, то от какой точки должна работать panTo ? 

Мне кажется, что вам нужна одна карта, которая по уолчанию не отображается и имеет какую-нибудь произвольную точку центра. По некоторому событию происходит получение координат, отображение карты, если та скрыта и вызов panTo

 

OlegOlegOlegOleg1980
28 января 2016, 02:07

cмотрите - при загрузке страницы есть текущий адрес, который подгружается из БД и соответсвенно по нему отрисовывается карта. также на странице есть input с текущим адресом, который пользователь может изменить. Так вот когда пользователь меняет адрес, соответсвенно по этому событию и должен отрабатывать метод panto на уже существующей карте. Скрипт отображения карты я привел выше. Пробовал вставить обработчик change в этот скрипт, но либо рисуется вторая карта с новым адресом, либо вообще ничего не меняется. если делаю логику с перезагрузкой страницы то все работает нормльно  и с этим скриптом, но у меня страница не должна перегружаться. Я не совсем понимаю как организовать обработчик change, т.е. сам скрипт обработчика и куда его прописать. Догадываюсь что это очень просто, но ранее не работал с объектами map. Подскажите код. СПС.

Всеволод Шмыров
28 января 2016, 02:07

В вашем коде сейчас в callback, который передается в then создается новый экземпляр карты. Вам нужно в методе init сначала создать карту, а потом вызывать geocode() и в then вызвать метод panTo у карты и создать прослушивание события поля (лучше не слушать change у input, так как в таком случае создается большое кол-во обращений к геокодеру - а у нас есть лимит). По этому событию тоже происходит вызов panTo.  

OlegOlegOlegOleg1980
28 января 2016, 02:07

Всеволод, я пробовал так делать, но видимо что то не совсем верно делал в силу недостаточных знаний. Вы можете код накидать, основу так сказать, а я под себя уже доработаю.. ну пока не выходит каменный цветок;-)

Всеволод Шмыров
28 января 2016, 02:07

Ну как то так. Тут не все, но думаю разберетесь. 

ymaps.ready(init);
function init () {
    // Создание карты.
    var map = new ymaps.Map('map', { ... }),
        oldGeoObject,
        promise;

    // ... установка настроек карты ...
   
    createRequest('');
   
    // Новый запрос по клику.
    $('#myButton').on('click', function () {
        createRequest($('#myInput').text());
    });
   
    function createRequest(address) {
        if(promise) {
            promise.reject();
        }
   
        promise = ymaps.geocode(address, { results: 1 });
        promise.then(function (res) {
            addGeoObject(res.getObjects.get(0));
        });
    }
   
    function addGeoObject(geoObject) {
        promise = null;
       
        // удаление старого геообъекта
        if(oldGeoObject) {
            map.geoObjects.remove(oldGeoObject);
        }
        oldGeoObject = geoObject;
        map.geoObjects.add(geoObject);
        map.panTo(geoObject.geometry.getCoordinates());
    }
}
OlegOlegOlegOleg1980
28 января 2016, 02:07

спасибо!!

сразу вопрос - что есть oldGeoObject и promise в конструкции

var map = new ymaps.Map('map', { ... }),
        oldGeoObject,
        promise;
OlegOlegOlegOleg1980
28 января 2016, 02:07

дошло :-)

это объявление переменныхB-)

стучите в скайп sasha_dreval помогу разобраться

OlegOlegOlegOleg1980
28 января 2016, 02:07

может через магент?? у меня нет скайпа...

вот небольшой пример

 

http://pastebin.com/RYxtb9yF

OlegOlegOlegOleg1980
28 января 2016, 02:07

cпасибо! уже реализовал по примеру Всеволода, нужен был сам механизм работы с объектом ;-)