Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2018, 18:06
Аспирант
Отправить личное сообщение для mxup Посмотреть профиль Найти все сообщения от mxup
 
Регистрация: 18.06.2015
Сообщений: 38

Центрирование карты Yandex API с использованием функции геокодера
Здравствуйте, есть например код для вывода меток на карте по координатам.


ymaps.ready(init);

    
    function init() {
        var myMap = new ymaps.Map("map", {
                center: [55.76, 37.64],
                zoom: 5,
    		controls: []
            }, {
                searchControlProvider: 'yandex#search'
            });
    	
    	myMap.controls.add('zoomControl');
    	
        myMap.geoObjects
           
            .add(new ymaps.Placemark([55.753215, 37.622504], {
                balloonContent: '<strong>Москва</strong>'
            }, {
                preset: 'islands#icon',
                iconColor: '#0095b6'
            }))
    .add(new ymaps.Placemark([59.939095, 30.315868], {
                balloonContent: '<strong>Санкт-Петербург</strong>'
            }, {
                preset: 'islands#icon',
                iconColor: '#0095b6'
            }))	
    	   .add(new ymaps.Placemark([54.513845, 36.261215], {
                balloonContent: '<strong>Калуга</strong>'
            }, {
                preset: 'islands#icon',
                iconColor: '#0095b6'
            }))
    	
    	 .add(new ymaps.Placemark([52.970371, 36.063837], {
                balloonContent: '<strong>Орёл</strong>'
            }, {
                preset: 'islands#icon',
                iconColor: '#0095b6'
            }))	
    	
    	
    }



Хотелось бы центрировать карту для местоположения пользовтеля на основе данных геокодера. То есть я например ищу с помощью PHP и GeoIP город посетителя сайта и мне нужно на основе полученного города, например "Omsk" центрировать карту в городе Омск. Я так понял это можно сделать на основе геокодера.


Один только вопрос, куда и главное КАК в моём коде вставить значение переменной coords полученной из результатов выполнения этой функции:


function init() {
        var myMap = new ymaps.Map('map', {
            center: [55.753994, 37.622093],
            zoom: 9
        });

        // Поиск координат центра Нижнего Новгорода.
        ymaps.geocode('omsk', {
            /**
             * Опции запроса
             * @see [url]https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/geocode.xml[/url]
             */
            // Сортировка результатов от центра окна карты.
            // boundedBy: myMap.getBounds(),
            // strictBounds: true,
            // Вместе с опцией boundedBy будет искать строго внутри области, указанной в boundedBy.
            // Если нужен только один результат, экономим трафик пользователей.
            results: 1
        }).then(function (res) {
                // Выбираем первый результат геокодирования.
                var firstGeoObject = res.geoObjects.get(0),
                    // Координаты геообъекта.
                    coords = firstGeoObject.geometry.getCoordinates(),
                    // Область видимости геообъекта.
                    bounds = firstGeoObject.properties.get('boundedBy');
    				
                firstGeoObject.options.set('preset', 'islands#darkBlueDotIconWithCaption');
                // Получаем строку с адресом и выводим в иконке геообъекта.
                firstGeoObject.properties.set('iconCaption', firstGeoObject.getAddressLine());

                // Добавляем первый найденный геообъект на карту.
                myMap.geoObjects.add(firstGeoObject);
    		
    			//myMap.setCenter([60.629499,56.800015], 10);
                // Масштабируем карту на область видимости геообъекта.
                myMap.setBounds(bounds, {
                    // Проверяем наличие тайлов на данном масштабе.
                    checkZoomRange: true
    				
                });
    		

    			

    		


                /**
                 * Все данные в виде javascript-объекта.
                 */
                console.log('Все данные геообъекта: ', firstGeoObject.properties.getAll());
                /**
                 * Метаданные запроса и ответа геокодера.
                 * @see [url]https://api.yandex.ru/maps/doc/geocoder/desc/reference/GeocoderResponseMetaData.xml[/url]
                 */
                console.log('Метаданные ответа геокодера: ', res.metaData);
                /**
                 * Метаданные геокодера, возвращаемые для найденного объекта.
                 * @see [url]https://api.yandex.ru/maps/doc/geocoder/desc/reference/GeocoderMetaData.xml[/url]
                 */
                console.log('Метаданные геокодера: ', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData'));
                /**
                 * Точность ответа (precision) возвращается только для домов.
                 * @see [url]https://api.yandex.ru/maps/doc/geocoder/desc/reference/precision.xml[/url]
                 */
                console.log('precision', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData.precision'));
                /**
                 * Тип найденного объекта (kind).
                 * @see [url]https://api.yandex.ru/maps/doc/geocoder/desc/reference/kind.xml[/url]
                 */
                console.log('Тип геообъекта: %s', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData.kind'));
                console.log('Название объекта: %s', firstGeoObject.properties.get('name'));
                console.log('Описание объекта: %s', firstGeoObject.properties.get('description'));
                console.log('Полное описание объекта: %s', firstGeoObject.properties.get('text'));
                /**
                * Прямые методы для работы с результатами геокодирования.
                * @see [url]https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeocodeResult-docpage/#getAddressLine[/url]
                */
                console.log('\nГосударство: %s', firstGeoObject.getCountry());
                console.log('Населенный пункт: %s', firstGeoObject.getLocalities().join(', '));
                console.log('Адрес объекта: %s', firstGeoObject.getAddressLine());
                console.log('Наименование здания: %s', firstGeoObject.getPremise() || '-');
                console.log('Номер здания: %s', firstGeoObject.getPremiseNumber() || '-');

                /**
                 * Если нужно добавить по найденным геокодером координатам метку со своими стилями и контентом балуна, создаем новую метку по координатам найденной и добавляем ее на карту вместо найденной.
                 */
                /**
                 var myPlacemark = new ymaps.Placemark(coords, {
                 iconContent: 'моя метка',
                 balloonContent: 'Содержимое балуна <strong>моей метки</strong>'
                 }, {
                 preset: 'islands#violetStretchyIcon'
                 });

                 myMap.geoObjects.add(myPlacemark);
                 */
            });
    }
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2018, 18:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

mxup,
строка 33
myMap.setCenter(coords , 10);
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2018, 18:32
Аспирант
Отправить личное сообщение для mxup Посмотреть профиль Найти все сообщения от mxup
 
Регистрация: 18.06.2015
Сообщений: 38

Сообщение от рони Посмотреть сообщение
mxup,
строка 33
myMap.setCenter(coords , 10);
Спасибо ,а как бы объединить эти две функции , а то они обе у меня с названием function init() и пересекаются.
То есть как воткнуть одну в другую?
Ну ещё можно другими словами сказать ,чтобы одним сплошным кодом это всё было)
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2018, 18:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

mxup,
function init() {
  var myMap = new ymaps.Map("map", {center:[55.753994, 37.622093], zoom:9});

  ymaps.geocode("omsk", {results:1}).then(function(res) {
    var firstGeoObject = res.geoObjects.get(0),
    coords = firstGeoObject.geometry.getCoordinates(),
    bounds = firstGeoObject.properties.get("boundedBy");
    firstGeoObject.options.set("preset", "islands#darkBlueDotIconWithCaption");
    firstGeoObject.properties.set("iconCaption", firstGeoObject.getAddressLine());
    myMap.geoObjects
     .add(firstGeoObject)

     .add(new ymaps.Placemark([55.753215, 37.622504], {
                balloonContent: '<strong>Москва</strong>'
            }, {
                preset: 'islands#icon',
                iconColor: '#0095b6'
            }))
    .add(new ymaps.Placemark([59.939095, 30.315868], {
                balloonContent: '<strong>Санкт-Петербург</strong>'
            }, {
                preset: 'islands#icon',
                iconColor: '#0095b6'
            }))
    	   .add(new ymaps.Placemark([54.513845, 36.261215], {
                balloonContent: '<strong>Калуга</strong>'
            }, {
                preset: 'islands#icon',
                iconColor: '#0095b6'
            }))

    	 .add(new ymaps.Placemark([52.970371, 36.063837], {
                balloonContent: '<strong>Орёл</strong>'
            }, {
                preset: 'islands#icon',
                iconColor: '#0095b6'
            }))

    myMap.setCenter(coords, 10);
    myMap.setBounds(bounds, {checkZoomRange:true});

  });
};
Ответить с цитированием
  #5 (permalink)  
Старый 04.12.2018, 18:50
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,794

ymaps.ready(function() {
    const mapCenter = [55.76, 37.64];
    const cities = [{
        title: 'Москва',
        coordinates: [55.753215, 37.622504]
    }, {
        title: '59.939095, 30.315868',
        coordinates: [55.753215, 37.622504]
    }];

    const Map = new ymaps.Map("map", {
        center: mapCenter,
        zoom: 5,
        controls: ['zoomControl']
    }, {
        searchControlProvider: 'yandex#search'
    });


    cities.forEach(function(city) {
        const Marker = new ymaps.Placemark(city.coordinates, {
            balloonContent: '<strong>' + city.title + '</strong>'
        }, {
            preset: 'islands#icon',
            iconColor: '#0095b6'
        });

        Map.geoObjects.add(Marker);
    });

    ymaps.geocode('omsk', {
        results: 1
    }).then(function(res) {
        Map.setCenter(
            res.geoObjects.get(0).geometry.getCoordinates()
        );
    });

});
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2018, 19:23
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,012

имхо, правильнее бы создать карту после получения результата геокодера, сразу с нормальными координатами. Так мы быстрее приедем куда надо, не засоряя сеть получением тайлов для окрестностей [55.76, 37.64]
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
yandex map API Castromen Общие вопросы Javascript 4 05.06.2018 12:57
Yandex map api или Yandex static arahmanov Элементы интерфейса 5 04.02.2016 11:34
enableScrollZoom не работает yandex api aleks_lv Общие вопросы Javascript 1 12.02.2015 17:35
Отмена функции связанной с JS API google.maps mr__brainwash Events/DOM/Window 3 20.10.2014 13:50
Вывод значения в переменную PHP. Яндекс Карты API romaalupka Серверные языки и технологии 2 05.02.2013 21:58