Question

我有一个模态，当点击它时，地图显示，但地图不起作用，而是显示灰色图像。

  <button class="btn" data-toggle="modal" data-target="#myModal" onclick="resize()">Show Modal</button>
    <!--MODAL-->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Warning!</h4>
                </div>
                <div class="modal-body" id="modal-body">

                    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
                    <div id="map" style="width: 580px; height:400px"></div>
                </div>
                <div class="modal-footer" id="modal-footer">

                </div>
            </div>
        </div>
    </div>

我的srcipt来自谷歌自动完成的地方，当地图不在模态内时，它工作得很好。

  <script>
            // This example adds a search box to a map, using the Google Place Autocomplete
            // feature. People can enter geographical searches. The search box will return a
            // pick list containing a mix of places and predicted search terms.

            // This example requires the Places library. Include the libraries=places
            // parameter when you first load the API. For example:
            // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;

            function initAutocomplete() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -33.8688, lng: 151.2195},
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                // Create the search box and link it to the UI element.
                var input = document.getElementById('pac-input');
                var searchBox = new google.maps.places.SearchBox(input);
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

                // Bias the SearchBox results towards current map's viewport.
                map.addListener('bounds_changed', function () {
                    searchBox.setBounds(map.getBounds());
                });

                var markers = [];
                // Listen for the event fired when the user selects a prediction and retrieve
                // more details for that place.
                searchBox.addListener('places_changed', function () {
                    var places = searchBox.getPlaces();

                    if (places.length == 0) {
                        return;
                    }

                    // Clear out the old markers.
                    markers.forEach(function (marker) {
                        marker.setMap(null);
                    });
                    markers = [];

                    // For each place, get the icon, name and location.
                    var bounds = new google.maps.LatLngBounds();
                    places.forEach(function (place) {
                        var icon = {
                            url: place.icon,
                            size: new google.maps.Size(71, 71),
                            origin: new google.maps.Point(0, 0),
                            anchor: new google.maps.Point(17, 34),
                            scaledSize: new google.maps.Size(25, 25)
                        };

                        // Create a marker for each place.
                        markers.push(new google.maps.Marker({
                            map: map,
                            icon: icon,
                            title: place.name,
                            position: place.geometry.location
                        }));

                        if (place.geometry.viewport) {
                            // Only geocodes have viewport.
                            bounds.union(place.geometry.viewport);
                        } else {
                            bounds.extend(place.geometry.location);
                        }
                    });
                    map.fitBounds(bounds);
                });

            }

function resize(){

            $('#myModal').on('shown', function () {
                google.maps.event.trigger(map, "resize");
            });
}

        </script>

我尝试过这样做Similar Question但它正在给我

未捕获的ReferenceError：$未定义

＆＃13;

      // This example adds a search box to a map, using the Google Place Autocomplete
            // feature. People can enter geographical searches. The search box will return a
            // pick list containing a mix of places and predicted search terms.

            // This example requires the Places library. Include the libraries=places
            // parameter when you first load the API. For example:
            // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
            var map;

            function initAutocomplete() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -33.8688, lng: 151.2195},
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                // Create the search box and link it to the UI element.
                var input = document.getElementById('pac-input');
                var searchBox = new google.maps.places.SearchBox(input);
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

                // Bias the SearchBox results towards current map's viewport.
                map.addListener('bounds_changed', function () {
                    searchBox.setBounds(map.getBounds());
                });

                var markers = [];
                // Listen for the event fired when the user selects a prediction and retrieve
                // more details for that place.
                searchBox.addListener('places_changed', function () {
                    var places = searchBox.getPlaces();

                    if (places.length == 0) {
                        return;
                    }

                    // Clear out the old markers.
                    markers.forEach(function (marker) {
                        marker.setMap(null);
                    });
                    markers = [];

                    // For each place, get the icon, name and location.
                    var bounds = new google.maps.LatLngBounds();
                    places.forEach(function (place) {
                        var icon = {
                            url: place.icon,
                            size: new google.maps.Size(71, 71),
                            origin: new google.maps.Point(0, 0),
                            anchor: new google.maps.Point(17, 34),
                            scaledSize: new google.maps.Size(25, 25)
                        };

                        // Create a marker for each place.
                        markers.push(new google.maps.Marker({
                            map: map,
                            icon: icon,
                            title: place.name,
                            position: place.geometry.location
                        }));

                        if (place.geometry.viewport) {
                            // Only geocodes have viewport.
                            bounds.union(place.geometry.viewport);
                        } else {
                            bounds.extend(place.geometry.location);
                        }
                    });
                    map.fitBounds(bounds);
                });

            }




$(document).ready(function () {
                $('#myModal').on('shown', function () {
                    google.maps.event.trigger(map, "resize");
                });
            });

＆＃13;

<!DOCTYPE html>
<html>
    <body>
      <body>
        <button class="btn" data-toggle="modal" data-target="#myModal"/>Show Modal</button>
        <!--MODAL-->
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Warning!</h4>
                    </div>
                    <div class="modal-body" id="modal-body">

                        <input id="pac-input" class="controls" type="text" placeholder="Search Box">
                        <div id="map" style="width: 580px; height:400px"></div>
                    </div>
                    <div class="modal-footer" id="modal-footer">

                    </div>
                </div>
            </div>
        </div>
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADR3ipXgTLZd7uIcl3NBUujxF3kKp9rFk&libraries=places&callback=initAutocomplete"
        async defer></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            
            </body>
</html>

＆＃13;

Answer 1

这种错误（$未定义）表示您尚未在代码中初始化javascript库。

正如您所使用的那样：

$('#myModal').on('shown', function () {
            google.maps.event.trigger(map, "resize");
        });

您需要在脚本的顶部添加jquery。像这样：

您可以在此处找到相关信息：w3schools jquery init

首先解决js错误，可能会加载地图。

Answer 2

var map;

function initAutocomplete() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -33.8688, lng: 151.2195},
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // ....
}
$(function() {
    $('#myModal').on('shown', function () {
        google.maps.event.trigger(map, "resize");
    });
});

你已经包裹了

google.maps.event.trigger(map, "resize");

在function resize() {}内永不执行。请尝试使用jQuery的{{1}}包裹它。

谷歌地图里面的模态没有显示

2 个答案: