Клуб API Карт

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

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 комментария
Подписаться на комментарии к посту

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

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

А вы не могли бы мне помоч, Вы не подумайте что мне лень или, что-то вроде этого, просто я с 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);
            }
        });
    });

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

_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)
                },);
            }

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

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

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