谷歌地图仅在 USB 调试时加载

Posted 2023-03-28

【中文标题】谷歌地图仅在 USB 调试时加载

【英文标题】：Google maps loads only when USB debugging

【发布时间】：2019-07-05 07:06:09

【问题描述】：

我正在使用 Google Maps API 在某些位置制作带有自定义图钉的地图。该地图在台式机上运行良好，但在我的 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');
        
    
);

请注意，同样的事情发生在两个单独的页面上，这里是另一个页面的代码，它只有一个 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 中测试过，它可以工作，但在我清除缓存后只有一次，再次加载时它会停止加载控制台中没有错误。

【参考方案1】：

删除包裹在代码周围的 jQuery 解决了问题，或者换句话说，这段代码：

$(function() 

);

这很有趣，但我认为这很难找到。