Google maps загружается только при отладке по USB - PullRequest
Новая
       19

Google maps загружается только при отладке по USB

0 голосов
/ 11 февраля 2019

Я использую API Карт Google для создания карты с пользовательскими булавками в определенных местах.Карта отлично работает на рабочем столе, но на моем планшете Android она не загружается - я использую Chrome для тестирования в обоих случаях.Что меня беспокоит, так это то, что когда я пытаюсь отладить страницу USB, карта начинает загружаться;однако, как только я закрываю инструменты разработчика страницы и перезагружаю страницу, карта снова перестает загружаться.

Быстрый Google ничего не показывает.Когда я отлаживаю, в выводе консоли ничего нет.

Вот мой код: 

<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script>
<script src="js/handlebars.js"></script>
<script src="js/custom-marker.js"></script>
<script src="js/unresolved-map.js"></script>

Вот файл custom-marker.js: 

function CustomMarker(latlng, map, args) {
    this.latlng = latlng;
    this.pos = latlng;
    this.args = args;
    this.setMap(map);
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function() {
    var self = this;
    var div = this.div;

    if (!div) {
        div = this.div = document.createElement('div');
        div.innerHTML = this.args.html;

        div.className = 'marker';
        div.style.position = 'absolute';

        if (typeof(self.args.marker_id) !== 'undefined') {
            div.dataset.marker_id = self.args.marker_id;
        }

        google.maps.event.addDomListener(div, "click", function(event) {
            google.maps.event.trigger(self, "click");
        });

        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

    if (point) {
        div.style.left = point.x -100 + 'px';
        div.style.top = point.y - 200 + 'px';
    }
};

CustomMarker.prototype.remove = function() {
    if (this.div) {
        this.div.parentNode.removeChild(this.div);
        this.div = null;
    }
};

CustomMarker.prototype.getPosition = function() {
    return this.latlng;
};

Вот unresolved-map.js: 

$(function() {
    window.markers = [];

    google.maps.event.addDomListener(window, 'load', initialize);

    function initialize() {
        var currentCenter = new google.maps.LatLng(43.85639, 25.97083);
        var mapOptions = {
            zoom: 14,
            center: currentCenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('signals-map'), mapOptions);

        for (var i = 0; i < Laravel.obektiSignals.length; i++) {
            var obekt = Laravel.obektiSignals[i];

            // compile handlebars template
            var source = document.getElementById("marker-template").innerHTML;
            var template = Handlebars.compile(source);
            var html = template(obekt);

            var markerPosition = new google.maps.LatLng(obekt.latitude, obekt.longitude);

            window.markers.push(new CustomMarker(markerPosition, map, {html: html, marker_id: obekt['id']}));

            setTimeout(function() {
                resizeSignalWrappers();
                zindex();
            }, 300);
        }
    }

    function zindex() {
        var markers = $('.marker');

        for (var i = 0; i < markers.length; i++)
        {
            var marker = markers.eq(i);

            marker.on('click', function() {
                $(this).css('z-index', starting_zindex);
                starting_zindex++;
            });
        }
    }

    function resizeSignalWrappers() {
        var markerSignals = $('.marker-signals');

        for (var i = 0; i < markerSignals.length; i++) {
            var markerSignal = markerSignals.eq(i);
            var name = markerSignal.parent().find('.obekt-name');
            var nameHeight = name.height();
            var newHeight = 170 - (nameHeight + 5);

            markerSignal.height(newHeight + 'px');
        }
    }
});

Обратите внимание, что то же самое происходит на двух отдельных страницах, вот код для другой страницы, которая имеет только один вывод, и это не пользовательский вывод:

$(function() {
    var map;
    var marker;

    $('#address').keydown(function(event) {
        if (event.keyCode == 13)
        {
            addressToMap();
        }
    });

    $(window).keydown(function(event){
        if (event.keyCode == 13) {
            event.preventDefault();
            return false;
        }
    });

    google.maps.event.addDomListener(window, 'load', initMap);

    function initMap() {
        var currentLatLng;

        var latitude = $('#latitude').val();
        var longitude = $('#longitude').val();

        if (latitude !== '' && longitude !== '')
        {
            currentLatLng = new google.maps.LatLng(latitude, longitude);
        }
        else
        {
            currentLatLng = new google.maps.LatLng(43.85639, 25.97083);
        }

        var myOptions = {
            zoom: $('.obekti-form').hasClass('zoom') ? 16 : 11,
            center: currentLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        marker = new google.maps.Marker({
            draggable: true,
            position: currentLatLng,
            map: map,
            title: "Selected location"
        });

        google.maps.event.addListener(map, 'click', function(event) {
            marker.setPosition(event.latLng);

            var latitude = event.latLng.lat();
            var longitude = event.latLng.lng();

            $('#latitude').val(latitude);
            $('#longitude').val(longitude);
            $('#latlng').val(latitude + ',' + longitude);
        });
    }

    function addressToMap()
    {
        var address = $.trim($('#address').val());

        if (address == '')
        {
            return;
        }

        $.post('https://maps.googleapis.com/maps/api/geocode/json?key=' + GOOGLE_MAPS_API_KEY + '&address=' + address, function(data) {
            if (data.status !== 'ZERO_RESULTS')
            {
                var lat = data.results[0].geometry.location.lat;
                var lng = data.results[0].geometry.location.lng;

                map.setCenter({lat: lat, lng: lng});

                if (data.results[0].geometry.viewport)
                {
                    // fit to the bounds of the searched location
                    var southwestLatLng = new google.maps.LatLng(data.results[0].geometry.viewport.southwest.lat, data.results[0].geometry.viewport.southwest.lng);
                    var northeastLatLng = new google.maps.LatLng(data.results[0].geometry.viewport.northeast.lat, data.results[0].geometry.viewport.northeast.lng);

                    var bounds = new google.maps.LatLngBounds(southwestLatLng, northeastLatLng);

                    map.fitBounds(bounds);
                }

                marker.setPosition(new google.maps.LatLng(lat, lng));

                $('#latitude').val(lat);
                $('#longitude').val(lng);
                $('#latlng').val(lat + ',' + lng);
            }
        });
    }
});

Обратите внимание, что я извлекаю некоторые данные (Laravel.obektiSignals) из базы данных, чтобы отобразить их в виде пинов.Также обратите внимание, что я использую Handlebars.js для компиляции HTML-шаблона.

EDIT1: только что протестирован в настольном Firefox и работает, но только один раз после очистки кеша, при повторной загрузке он перестает загружаться без ошибокв консоли.

1 Ответ

0 голосов
/ 11 февраля 2019

Удаление jQuery-обертки вокруг кода решило проблему, или, другими словами, этот код: 

$(function() {

});

интересно, почему это происходит, но я предполагаю, что это будет трудно выяснить.

...