javascript - Angular-Google -Maps - 针对移动设备调整大小时 map 渲染不正确

Question

我已经实现了我的 map ，但是，当我在移动设备或分辨率低于 768px 上查看 map 时， map 渲染不正确。它似乎正在加载左上角的所有 map 图 block ，然后再次完整且正确地加载？

我尝试设置调整大小事件，但这没有效果。

这是我的代码

<ui-gmap-google-map zoom="10" center="map.center" events="map.events" class="col-md-12 map_canvas">
    <ui-gmap-marker ng-repeat="m in markers" coords="m.coords" idkey="m.id">
        <ui-gmap-window ng-if="m.response">
            <div class="google-window row-fluid">
                <div class="row-fluid">
                     <h1>Driver Detail</h1>

                    <div class="row-fluid">
                        <div class="col-md-4 row-title">Name:</div>
                        <div class="col-md-8">{{m.response.lastName}}, {{m.response.firstName.substring(0, 1)}}</div>
                    </div>
                    <div class="row-fluid">
                        <div class="col-md-4 row-title">VRM:</div>
                        <div class="col-md-8">{{m.response.vrm}}</div>
                    </div>
                    <div class="row-fluid">
                        <div class="col-md-4 row-title">Lat/Lng:</div>
                        <div class="col-md-8"><a href="{{m.gLink}}" target="_blank" class="google-link-marker">{{m.response.latitude + "/" + m.response.longitude}}&nbsp;&nbsp;<i class="fa fa-map-marker"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </ui-gmap-window>
    </ui-gmap-marker>
</ui-gmap-google-map>

还有我的 JS

$scope.map = {
    zoom: 10,
    center: [{
        latitude: response[0].latitude,
        longitude: response[0].longitude
    }, {
        latitude: response[response.length - 1].latitude,
        longitude: response[response.length - 1].longitude
    }],
    options: {
        // draggable: false
    },
    events: {
        tilesloaded: function (map, eventName, args) {
            google.maps.event.trigger(map, 'resize');
        }
    }
};

正常桌面分辨率

调整大小后< 768px

Answer 1

当缩放级别小于 14 时，似乎会出现此问题。非常奇怪。如果我将缩放级别设置为高于此值，问题就会消失。

这很可能是 angular-google-maps 库中可以设置的设置。

<ui-gmap-google-map zoom="13" center="map.center" events="" class="col-md-12 google-map">