Клуб API Карт

Создание карты по требованию + Прямое геокодирование

spina.clan
24 января 2017, 02:37

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

Создание карты по требованию + Прямое геокодирование

// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(init);

// Инициализация и уничтожение карты при нажатии на кнопку.
function init () {
    var myMap;

    $('#toggle').bind({
        click: function () {
            if (!myMap) {
                myMap = new ymaps.Map('map', {
                    center: [55.010251, 82.958437], // Новосибирск
                    zoom: 9
                }, {
                    searchControlProvider: 'yandex#search'
                });
                $("#toggle").attr('value', 'Скрыть карту');
            }
            else {
                myMap.destroy();// Деструктор карты
                myMap = null;
                $("#toggle").attr('value', 'Показать карту снова');
            }
        }
    });
}

Совместить с этим

ymaps.ready(init);

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

    // Поиск координат центра Нижнего Новгорода.
    ymaps.geocode('Нижний Новгород', {
        /**
         * Опции запроса
         * @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');

            // Добавляем первый найденный геообъект на карту.
            myMap.geoObjects.add(firstGeoObject);
            // Масштабируем карту на область видимости геообъекта.
            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'));

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

             myMap.geoObjects.add(myPlacemark);
             */
        });
}

Подскажите два дня делаю не получается

5 комментариев
Сначала геокодируйте, потом создавайте карту.
Непонятно, что тут можно делать 2 дня




ymaps.ready(init);
function init() {
ymaps.geocode('Нижний Новгород', {results: 1}).then(function (res) {
var firstGeoObject = res.geoObjects.get(0),
coords = firstGeoObject.geometry.getCoordinates(),
bounds = firstGeoObject.properties.get('boundedBy');


var myMap = new ymaps.Map('map', {
center: coords,
zoom: 9,
// Можно и сразу с оптимальным масштабом карту создать
// bounds: bounds,
});


});
}
dimik,
Я в js 7% понимаю, лучше HTML и css знаю, подскажите подробней как сделать? Пожалуйста. Как сделать что бы этот пример карты загружался по требованию с кнопки?
dimik,
Что я делаю не так?


 <script type="text/javascript">
ymaps.ready(init);
function init () {
var myMap;
$('#toggle').bind({
click: function () {
if (!myMap) {
myMap = new ymaps.Map('map', {
center: [55.753994, 37.622093],
zoom: 9
}, {
searchControlProvider: 'yandex#search'
});
ymaps.geocode('город, улица', {
results: 1
}).then(function (res) {
var firstGeoObject = res.geoObjects.get(0),
coords = firstGeoObject.geometry.getCoordinates(),
bounds = firstGeoObject.properties.get('boundedBy');
myMap.geoObjects.add(firstGeoObject);
myMap.setBounds(bounds, {
checkZoomRange: true
});
console.log('Все данные геообъекта: ', firstGeoObject.properties.getAll());
console.log('Метаданные ответа геокодера: ', res.metaData);
console.log('Метаданные геокодера: ', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData'));
console.log('precision', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData.precision'));
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'));
});
$("#toggle").attr('value', 'Скрыть карту');
}
else {
myMap.destroy();// Деструктор карты
myMap = null;
$("#toggle").attr('value', 'Показать карту снова');
}
}
});
}
</script>
Я в js 7% понимаю, лучше HTML и css знаю, подскажите подробней как сделать? Пожалуйста.
Как сделать что бы этот пример карты загружался по требованию с кнопки?