Проблемы с загрузкой Карт Google на странице PHP - PullRequest
1 голос
/ 01 июня 2011

Я подключаю Google Map к базе данных MySQL, чтобы получить список дистрибьюторов по всему миру, и у меня, похоже, есть несколько проблем.

  1. Иногда сама страница вообще не загружаетсяв Firefox (v4 на Mac).Это темпераментно на моей машине (FF v3.6 Mac) и Windows-машине (FF v4 Win 7), хорошо в Safari / Opera, вообще не загружается в IE 9 (Win 7).Не уверен, что это проблема или код сети.
  2. Время загрузки довольно медленное.Возможно, потому, что карта покрывает всю страницу (создаст квадратный блок для ее размещения).

URL-адрес страницы здесь , и я использовал код из Страница Шона Фини.

Код, который у меня есть:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<I entered my key here>" type="text/javascript"></script>
<body onUnload="GUnload()">
<div id="map" style="position:absolute;top:0px;bottom:0px;left:0;right:0;"></div>
</body>

<script type="text/javascript">
//<![CDATA[
var map;
var latlngbounds;
if (GBrowserIsCompatible()) {
    function createMarker(point, address) {
    var marker = new GMarker(point);
    var html = address;
    GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
    });
    return marker;
    }

    function extendBounding(point) {
    latlngbounds.extend(point);
    var zoom = map.getBoundsZoomLevel(latlngbounds);
    if (zoom < 10) {
        zoom = 12;
    }
    map.setCenter(latlngbounds.getCenter(), zoom);
    }
}

map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl3D());
map.addControl(new GMapTypeControl());
latlngbounds = new GLatLngBounds();

GDownloadUrl("genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
    var address = markers[i].getAttribute("address");
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
    var marker = createMarker(point, address);
    map.addOverlay(marker);
    extendBounding(point);
}
});
}

//]]>
</script>

Код, который получает данные, такой же, как в примере.

Любойидеи о том, почему он не всегда загружается в браузерах, и почему загрузка занимает некоторое время?

Спасибо,

Адриан

Ответы [ 3 ]

3 голосов
/ 01 июня 2011
  1. В идеале вы должны обернуть код, который загружает карту, в документ, готовый или событие загрузки окна.

  2. Я заметил, что ваш код неправильно вложен в блок GBrowserIsCompatible(), поэтому исправьте это.

  3. Насколько я помню, API карт Google v2 требует от вас вызова метода setCenter() перед выполнением каких-либо операций с картой. Итак, для начала, установите центр в (0, 0) сразу после создания карты.

  4. Я заметил, что вы загружаете данные XML, прежде чем добавлять маркеры на карту. Вы должны принять во внимание время, затраченное сервером на обслуживание данных XML. Если вы вызвали setCenter() перед загрузкой XML, карта будет отображаться во время асинхронной загрузки XML.

  5. Внутри кода, который обрабатывает данные XML: при добавлении маркера не вызывайте setCenter() немедленно. Это приведет к вызову функции 1000 раз, если в вашем XML есть 1000 маркеров. Вместо этого просто позвоните latlngbounds.extend(point). После того, как вы повторили цикл, вычислите масштаб / центр и вызовите setCenter(). Таким образом, вы вызовете эту функцию только дважды.

Редактировать

Я понял, в чем проблема. Genxml.php random возвращает строку Google Geo error 620 occurred, которая не может быть проанализирована как XML, что вызывает ошибки JavaScript, и маркеры не отображаются. Лучше взгляните на код этого файла и выясните, почему это происходит случайным образом. В других случаях, когда этот файл действительно возвращает действительный XML, маркеры отображаются так, как ожидалось.

0 голосов
/ 18 июля 2019

Вы можете запустить код карты с помощью window.load после загрузки всего:

jQuery(document).ready(function initAutocomplete() {
                var p_lag=$('#longitude').val();
                var p_lat=$('#latitude').val();
                if(p_lat==''){
                    var p_lat=20.593684;
                }
                if(p_lag==''){ 
                    var p_lag=78.96288000000004 ;
                }
            var myLatLng = {lat: p_lat,lng: p_lag};

            var map = new google.maps.Map(document.getElementById('dvMap'), {
                center: myLatLng,
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var marker = new google.maps.Marker({
                position: myLatLng,
                draggable: true,
                map: map,
                title: 'Map'
            });

            // Create the search box and link it to the UI element.
            var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);
            //map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function () {
                searchBox.setBounds(map.getBounds());
            });

            //Click event for getting lat lng
            google.maps.event.addListener(map, 'click', function (e) {
                $('input#latitude').val(e.latLng.lat());
                $('input#longitude').val(e.latLng.lng());
            });

            google.maps.event.addListener(marker, 'dragend', function (e) {
                $('input#latitude').val(e.latLng.lat());
                $('input#longitude').val(e.latLng.lng());
            });

            var markers = [];
            // [START region_getplaces]
            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            searchBox.addListener('places_changed', function () {
                var places = searchBox.getPlaces();

                if (places.length == 0) {
                    return;
                }

                // Clear out the old markers.
                /*markers.forEach(function (marker) {
                    marker.setMap(null);
                });*/
                markers = [];

                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function (place) {
                    var icon = {
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(25, 25)
                    };

                    // Create a marker for each place.
                    markers.push(new google.maps.Marker({
                        map: map,
                        icon: icon,
                        title: place.name,
                        position: place.geometry.location
                    }));

                    $('#latitude').val(place.geometry.location.lat());
                    $('#longitude').val(place.geometry.location.lng());

                    marker.setPosition(place.geometry.location);

                    if (place.geometry.viewport) {
                        // Only geocodes have viewport.
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                    map.fitBounds(bounds);
                });
            });
        }
        );
0 голосов
/ 07 апреля 2012

Похоже, Google недавно ужесточил запросы геокодирования. Если вы отправите 10 слишком быстро, это обрезает вас с ошибкой 620. Решение, которое они рекомендуют, это добавить динамический таймер. В других сообщениях, посвященных стековому потоку, предполагалось, что статический таймер на 0,25 секунды достаточно хорош, но я нашел рекомендацию Google использовать цикл while, который увеличивает значение таймера по мере необходимости, работает лучше. Например:

// Initialize delay in geocode speed
    public $delay = 0;
public function lookup(arguments)
        {

            $geocode_pending = true;

        while ($geocode_pending) {
            $search = //address string to search;
                    $response = $this->performRequest($search, 'xml');
                    $xml      = new SimpleXMLElement($response);
                    $status   = (int) $xml->Response->Status->code;

            switch ($status) {

            case self::G_GEO_SUCCESS:
                    require_once('placemark.php');

                    $placemarks = array();
                    foreach ($xml->Response->Placemark as $placemark)
                        $placemarks[] = Placemark::FromSimpleXml($placemark);
                $geocode_pending = false;
                    return $placemarks;

            case self::G_GEO_TOO_MANY_QUERIES:
                $delay += 100000;
            case self::G_GEO_UNKNOWN_ADDRESS:
                case self::G_GEO_UNAVAILABLE_ADDRESS:
                    return array();

                default:
                    throw new Exception(sprintf('Google Geo error %d occurred', $status));
            }
            usleep($delay);
        }
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...