показать картинку загрузки пока обрабатывается запрос

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

bratyxa-servis

4 марта 2013, 19:33

Привет всем. У меня как только происходит клик по карте, javascript обращается к php файлу. В этот php файл передаются параметры долготы и широты и потом они подставляются в запрос таким образом

$lat = $_POST['lat'];
$lon = $_POST['lon'];
@$obj = simplexml_load_string(file_get_contents('http://geocode-maps.yandex.ru/1.x/?geocode='.$lon.','.$lat));

в общем я узнаю буквенное географическое положение и потом вывожу его под картой, но для этого надо несколько секунд. Мне обязательно надо показывать картинку загрузки пока обрабатывается запрос или просто вывести на экран под картой что мол идет определение местоположения. Как мне можно это сделать. Зарание большое спасибо.

4 комментария

Авторизуйтесь, чтобы оставить комментарий

Владислав Турман

28 января 2016, 02:37

На query во время клика отобразите loader ( крутящийся или просто горизонтальный ), а на success уберите его.

Это не отностися к API яндекс карт, но я недавно делал нечто похожее.

bratyxa-servis

28 января 2016, 02:37

А вы не могли бы мне помоч, Вы не подумайте что мне лень или, что-то вроде этого, просто я с js слабо знаком вот что я использую

var myMap, myPlacemark, myBalloonContentBodyLayout, myBalloon;

    ymaps.ready(function () {
        myMap = new ymaps.Map("map",{
            center: [ymaps.geolocation.latitude, ymaps.geolocation.longitude],
            zoom: 13
                }, {
                    balloonMaxWidth: 400
                }),searchControl = new ymaps.control.SearchControl({ width: 390, noPlacemark: true });
            myMap.controls
                .add('zoomControl')
                .add('typeSelector')
                .add(searchControl, { left: '140px', top: '5px' })
                .add('mapTools');

        /**
         * @see http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/templateLayoutFactory.xml
         */
        myBalloonContentBodyLayout = ymaps.templateLayoutFactory.createClass(
            'Выбрать это месторасположение $[porpoercoords]', {
            build: function () {
                myBalloonContentBodyLayout.superclass.build.call(this);
                $('.btn').on('click', $.proxy(this.onClick, this));
            },
            clear: function () {
                $('.btn').off('click');
                myBalloonContentBodyLayout.superclass.clear.call(this);
            },
            onClick: function () {
                var data = this.getData(),
                    balloon = data.balloon,
                    coords = data.coords;

                if(myPlacemark) {
                    myPlacemark.geometry.setCoordinates(coords);
                }
                else {
                    myPlacemark = new ymaps.Placemark(coords, {}, { preset: 'twirl#blueIcon' });
                    myMap.geoObjects.add(myPlacemark);
                }

                this._loadData(coords);
                balloon.close();
            },
            _loadData: function (coords) {
                $("#res").load("http://stail.ru/skins/tpl/order/addmetki.php", {
                    lat : coords[0].toPrecision(6),
                    lon : coords[1].toPrecision(6)
                });
            }
        });

        /**
         * @see http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/Balloon.xml
         */
        myBalloon = new ymaps.Balloon(myMap);
        myBalloon.options
            .set({ contentBodyLayout: myBalloonContentBodyLayout })
            .setParent(myMap.options);

        myMap.events.add('click', function (e) {
            var coords = e.get('coordPosition');

            if(myBalloon.isOpen()) {
                myBalloon.close();
            }
            else {
                myBalloon
                    .setData({
                        coords: coords,
                        balloon: myBalloon
                    })
                    .open(coords);
            }
        });
    });

я бы выбрал нужную часть, но не знаю, что именно надо:-(. Зарание огромное спасибо.

Владислав Турман

28 января 2016, 02:37

_loadData: function (coords) {

$('#res').html('');
                $("#res").load("http://stail.ru/skins/tpl/order/addmetki.php", {
                    lat : coords[0].toPrecision(6),
                    lon : coords[1].toPrecision(6)
                },);
            }

Картинку сами пожалуйста найдите и подставьте ее урл, красоту там всю наведите.

Код не проверял, интуитивно - должен работать.

bratyxa-servis

28 января 2016, 02:37

Спасибо ОГРОМЕННОЕ:-O