谷歌地图卡在左上角 - 桌面解决方案不适用于移动设计

Question

我在使用 Google Maps 时遇到问题，我在隐藏的 DIV 元素中渲染地图。即使在我移动地图之后，地图也渲染了，但只显示了左上角。

我发现的解决方案是等待渲染地图和点，直到用户实际显示地图。为此，我让间隔计数器每半秒迭代一次，以查看用户是否单击了按钮以打开/显示元素。

这适用于桌面浏览器，但不能解决移动浏览器的相同问题。角落仍然卡住，我不知道从移动角度来看如何处理。

<script type="text/javascript">
    var locations = [SOME DATA];

    var map;
    var bounds;

    function initialize() {
        var myLatlng = new google.maps.LatLng(0, 0);
        var mapOptions = {
            zoom: 5,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < locations.length; i++) {
            var entity = locations[i];
            var myLatLng = new google.maps.LatLng(entity[6], entity[7]);

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: pinBase + pin
            });

            if(entity[8] < 5) {
                bounds.extend(marker.position);
            }

            var infowindow = new google.maps.InfoWindow({});

            if(entity[5] == "0") {
                entity[5] = "N/A";
            }

            contentString = "<div class=\"mapBaloon\"><b>" + entity[0] + "</b><br />WWW: <a href=\"http://" + entity[2] + "\">http://" + entity[2] + "</a><br />City: " + entity[3] + "<br />State: " + entity[4] + "<br />Phone: " + entity[5] + "<br />Distance: " + entity[8] + " miles</div>";
            bindInfoWindow(marker, map, infowindow, contentString);
        }

        map.fitBounds(bounds);
    }

    function bindInfoWindow(marker, map, infowindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(html);
            infowindow.open(map, marker);
        });
    } 

    var myVar = setInterval(function() {
        google.maps.event.addDomListener(window, 'load', initialize);

        if($(".commArea2").is(":visible")) {
            clearInterval(myVar);
            google.maps.event.trigger(map, 'resize');
            map.fitBounds(bounds);
        }
    }, 500);         
</script>

Answer 1

我在移动使用方面遇到了类似的问题。当div被触发显示时，我调用了initialize()函数。

$('#open_btn').bind('touchstart', function(event){
    initialize();
})

Answer 2

在我看来，有几个可能的原因可能会导致这种情况。因为它在桌面上工作，而不是在移动设备上工作，我怀疑你有竞争条件。桌面速度更快，它将更快地加载 Google Maps Javascript。您 500 毫秒的延迟听起来不足以在移动设备上等待。但是，您不会提高 setInterval。摆脱它。

Google 提供了向您的“

https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

我遇到的另一个问题是，在执行任何操作之前，您确实必须确保地图上有明确的宽度/高度。设置宽度/高度属性，执行“位置：绝对”并定义所有顶部/左侧/底部/右侧，或其他。但是，如果 Maps API 无法确定父元素的显式宽度，您会在角落里得到一个漂亮的盒子。但就像你说的，它在一个地方工作，所以这很可能不是问题。只需确保您要使用移动浏览器不支持的 HTML 或 CSS 格式即可。