谷歌地图加载只有当USB调试

问题描述 投票:0回答:1

我使用谷歌地图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>

这是自定义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');
        }
    }
});

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

$(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:在桌面火狐只是测试和它的作品,但只有一次后,我清除缓存,重新装入停止装载在控制台中没有错误时。

javascript google-maps maps google-maps-markers
1个回答
0
投票

除去周围的代码jQuery的缠绕固定的问题,或者换句话说此代码:

$(function() {

});

有趣的使用它的原因,但我认为这将是很难找到的。

© www.soinside.com 2019 - 2024. All rights reserved.