Google 地图显示灰色条带且看起来扭曲

Question

出于某种原因，即使我的 Google 地图显示了，地图上也有奇怪的灰色 bands/lines 运行（下图 link）。

仅供参考，它使用地点 API 来搜索位置。

Screenshot of the map issue

有人知道为什么会这样吗？这是地图的代码：

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
<script type="text/javascript">
    function search_map_init() {
        var args     = {
            disableDefaultUI : true,
            center           : new google.maps.LatLng(51.6948168, -0.6433884),
            mapTypeId        : google.maps.MapTypeId.ROADMAP,
            scrollwheel      : false,
            zoom             : 12,
            styles           : [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), args);

        var marker_url = {
            url        : 'IMG_URL',
            scaledSize : new google.maps.Size(48, 65)
        };

        var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input'));

        google.maps.event.addListener(searchBox, 'places_changed', function() {
            searchBox.set('map', null);

            var places = searchBox.getPlaces();

            var bounds = new google.maps.LatLngBounds();
            var i, place;
            for (i = 0; place = places[i]; i++) {
                (function(place) {
                    var marker = new google.maps.Marker({

                        position: place.geometry.location,
                        icon     : marker_url
                    });
                    marker.bindTo('map', searchBox, 'map');
                    google.maps.event.addListener(marker, 'map_changed', function() {
                        if (!this.getMap()) {
                            this.unbindAll();
                        }
                    });

                    bounds.extend(place.geometry.location);
                }(place));

                var new_address = $('#pac-input').val();
                var new_lat     = place.geometry.location.lat();
                var new_lng     = place.geometry.location.lng();

                $('input[name="post[meta_input][map][address]"]').val(new_address);
                $('input[name="post[meta_input][map][lat]"]').val(new_lat);
                $('input[name="post[meta_input][map][lng]"]').val(new_lng);
            }

            map.fitBounds(bounds);
            searchBox.set('map', map);
            map.setZoom(Math.min(map.getZoom(),12));
        });

        return map;
    }

    google.maps.event.addDomListener(window, 'load', search_map_init);
</script>

注意：我已经将 API 键和图像 URL 替换为 API_KEY和上面代码中的IMG_URL。

Answer 1

我在 CSS 中设置了 min-width 用于其他也会影响地图显示的东西。问题已解决！

Google 地图显示灰色条带且看起来扭曲

Google map showing grey bands and looks distorted

wordpress

google-maps

google-maps-api-3