首页 > 解决方案 > 谷歌地图仅在 USB 调试时加载

问题描述

我正在使用 Google Maps API 在某些位置制作带有自定义图钉的地图。该地图在台式机上运行良好,但在我的 Android 平板电脑上无法加载 - 我在这两种情况下都使用 Chrome 对其进行测试。令我困惑的是,当我尝试 USB 调试页面时,地图开始加载;但是,一旦我关闭页面的开发人员工具并重新加载页面,地图就会再次停止加载。

一个快速的谷歌没有透露任何东西。当我调试时,控制台输出中没有任何内容。

这是我的一些代码:

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

这是未解析的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');
        }
    }
});

请注意,同样的事情发生在两个单独的页面上,这是另一个页面的代码,它只有一个 pin,它不是自定义 pin:

$(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 中进行了测试,它可以工作,但在我清除缓存后只有一次,当再次加载时,它会停止加载控制台中的任何错误。

标签: javascriptgoogle-mapsmapsgoogle-maps-markers

解决方案


删除包裹在代码周围的 jQuery 可以解决问题,或者换句话说,这段代码:

$(function() {

});

有趣的是为什么会发生这种情况,但我认为很难找出答案。


推荐阅读