javascript - jquery show() 函数后谷歌地图未加载

Question

我的问题是，在 jquery 中调用 show() 函数后，谷歌地图未加载。我正在使用 display:none 来关闭页面加载时的划分。所以我发现它是通过 google.maps.event.trigger(map, 'resize') 完成的，但我不知道将 google.maps.event.trigger(map, 'resize') 放在哪里我的jquery。 Bootstrap 模型会正确弹出，显示 map 和地址，其他功能运行正常。但点击 jquery 的显示功能后，它无法正确加载。

我已阅读以下问题:1)。 (Google Maps Display:None Problem) 2) (How to use google.maps.event.trigger(map, 'resize'))

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBNEQCHUYPsekbYz7tym8Q4Ne2vlUsvnFc"></script>
            <!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> -->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
            <script>
            $(document).ready(function(){
            $(".address_open").click(function(){ 
                    // i don't know the placing of this function. 
                    google.maps.event.trigger(map, 'resize');
                    $(".Mymap1").show();
            });
            });
            </script>
            <script type="text/javascript"> 
                var map;
                var marker;
                var coords = new google.maps.LatLng();
                var myLatlng = new google.maps.LatLng(23.022505,72.5713621);
                var geocoder = new google.maps.Geocoder();
                var infowindow = new google.maps.InfoWindow();
                function initialize(){
                    var mapOptions = {
                        zoom: 18,
                        center: myLatlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    map = new google.maps.Map(document.getElementById("myMap"), mapOptions);
                    google.maps.event.trigger(map, 'resize');
                    marker = new google.maps.Marker({
                        map: map,
                        position: myLatlng,
                        draggable: true 
                    });     

                    geocoder.geocode({'latLng': myLatlng }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) {
                                $('#address').val(results[0].formatted_address);
                                $('#latitude').val(marker.getPosition().lat());
                                $('#longitude').val(marker.getPosition().lng());
                                infowindow.setContent(results[0].formatted_address);
                                infowindow.open(map, marker);
                            }
                        }
                    });


                    google.maps.event.addListener(marker, 'dragend', function() {

                    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) {
                                $('#address').val(results[0].formatted_address);
                                $('#latitude').val(marker.getPosition().lat());
                                $('#longitude').val(marker.getPosition().lng());
                                infowindow.setContent(results[0].formatted_address);
                                infowindow.open(map, marker);
                            }
                        }
                    });
                });
                }
                google.maps.event.addDomListener(window, 'load', initialize);
            </script>

引导模型

<div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog modal-lg">
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              <h4 class="modal-title">Map View</h4>
                            </div>                          
                            <div class="modal-body">
                              <div id="myMap" class="Mymap1"></div>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                        </div>

其他部门点击 map 即可。

     <div class="form-group">
                              <label> Address</label>
                              <input type="text" id="address" data-toggle="modal" data-target="#myModal" name="txtName" value="<?php if(isset($fname)){echo $fname;} else { echo ""; }  ?>"  class="form-control abc address_open" />     
                                 <input type="hidden" id="latitude" placeholder="Latitude"/>
                                 <input type="hidden" id="longitude" placeholder="Longitude"/>                   
 </div>

Answer 1

将以下代码更改为

        $(".address_open").click(function(){ 
                // i don't know the placing of this function. 
                google.maps.event.trigger(map, 'resize');
                $(".Mymap1").show();
        });

这个

$('#myModal').on('show.bs.modal', function (e) {
  google.maps.event.trigger(map, 'resize');
  $(".Mymap1").show();//Am not sure what is this?
});

因为您已经在指向模式的按钮上有数据目标。在“show.bs.modal”事件中，您可以做更多工作，这会在模式打开时触发