Форум

spinastr · #1 (**permalink**) 24.01.2017, 02:26

Здравствуйте! Подскажите пожалуйста в песочнице яндекс API есть два примера карт.

Создание карты по требованию

// Как только будет загружен 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);
             */
        });
}

Подскажите как объединить два этих скрипта, что бы при нажатии на кнопку загружалась карта (Прямое геокодирование)?

spinastr · #2 (**permalink**) 24.01.2017, 02:58

Подскажите пожалуйста! Я не понимаю в JS

spinastr · #3 (**permalink**) 24.01.2017, 03:24

Так открывается карта без метки

<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'
                });
                $("#toggle").attr('value', 'Скрыть карту');
            }
            else {
                myMap.destroy();// Деструктор карты
                myMap = null;
                $("#toggle").attr('value', 'Показать карту снова');
            }
        }
    });

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'));
});
}
</script>

spinastr · #4 (**permalink**) 24.01.2017, 20:16

Поможет кто ни будь? Пожалуйста!

spinastr · #5 (**permalink**) 25.01.2017, 04:15

Что я делаю не так?

<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>

рони · #6 (**permalink**) 25.01.2017, 05:18

spinastr, вашим кодом не предусмотрено предупреждений про время на загрузку (желательно)... запустить код , пауза 5 сек, нажать кнопку и ждать результат ... смотрите что у вас не так и делайте макеты полностью иначе к телепатам

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #map{
    display: none;
    width: 500px;
    height: 500px;
  }

  #map.active{
   display: block;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript">
var mapsScript = document.createElement('script');
mapsScript.onload = function() {
  ymaps.ready(init);
}
mapsScript.src = 'http://api-maps.yandex.ru/2.1/?lang=ru_RU';
document.querySelector('head').appendChild(mapsScript);
function init () {
 var myMap;
$('#toggle').bind({
 click: function () {
 $('#map').addClass('active');
 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('active');// Деструктор карты
 myMap = null;
 $('#map').removeClass('active');
 $("#toggle").attr('value', 'Показать карту снова');
 }
 }
 });
}
</script>

  <script>
$(function() {

});
  </script>
</head>

<body>
  <input id="toggle" name="" type="button" value="Показать карту">
<div id="map"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Sic enim censent, oportunitatis esse beate vivere. Duo Reges: constructio interrete. Quae si potest singula consolando levare, universa quo modo sustinebit? Virtutibus igitur rectissime mihi videris et ad consuetudinem nostrae orationis vitia posuisse contraria. Atqui reperies, inquit, in hoc quidem pertinacem; <mark>Non potes, nisi retexueris illa.</mark> At multis se probavit. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Illa tamen simplicia, vestra versuta. </p>
</body>
</html>

spinastr · #7 (**permalink**) 25.01.2017, 05:43

рони,
Да всё работает, спасибо, большое))) Огромное!!!

Ещё один вопрос, карта отмеряет места в низу. Если после неё поставить текст, то будет окно, можно как то убрать высоту карты, до её загрузки?

spinastr · #8 (**permalink**) 25.01.2017, 06:01

рони,

рони · #9 (**permalink**) 25.01.2017, 06:17

spinastr,
смотрите код выше -- css и строки 31, 64

spinastr · #10 (**permalink**) 25.01.2017, 06:43

рони,
Если можете, то подскажите как сделать? В js понимаю 5%

Форум

Справочник

Discord чат

Курсы javascript