Google 地图在 jQuery Slide Up/Down 的字段集中不起作用

Question

对于我的提交表单，我使用了字段集，如果先前的字段集有效，它们将使用 jQuery 向上滑动和向下滑动。在字段集编号 3 处，将有一个包含 google 个地图的地图，用于根据经度和纬度定位客户的地址。

<fieldset id="werkgebied" style="display: none;">
                                                <div class="row">
                                                  <div class="form-group">
                                                    <label class="col-md-3 control-label" for="adres">Uw Adres</label>
                                                        <div class="col-md-6" id="stapwerkgebied_adres">

                                                        </div>
                                                    </div>
                                                 </div>
                                                 <div class="row">
                                                    <div class="form-group">

                                                        <label class="col-md-3 control-label" for="adres">Werkgebied</label>
                                                        <div class="col-md-6">
                                                            <div id="kaartje" style="width:400px;height:400px;"></div> 

                                                            <script type="text/javascript">
                                                            var map;
                                                            var centerpoint;

                                                            function initmap(latvar=52.3747388,longvar=4.7585307){
                                                                var map = new google.maps.Map(document.getElementById('kaartje'), {
                                                              center: {lat: Number(latvar), lng: Number(longvar)},
                                                              zoom: 9
                                                            });
                                                            var kmRadius = $("#aantalkm").val();
                                                            circle = new google.maps.Circle({
                                                                center: {lat: Number(latvar), lng: Number(longvar)},
                                                                map: map,
                                                                strokeColor: '#000',
                                                                strokeWeight: 2,
                                                                strokeOpacity: 0.5,
                                                                fillColor: '#046e94',
                                                                fillOpacity: 0.5,
                                                                radius: kmRadius * 1000
                                                            });
                                                            }
                                                            function updateMarker(coord) {
                                                                var kmRadius = $("#aantalkm").val();
                                                                circle.setRadius(kmRadius*1000);
                                                            }
                                                            </script>
                                                            <script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnsp8B8c942fe8i42UEAImAcAoTbDVYN4&callback=initmap">
</script>
                                                            </div>
                                                        </div>
                                                     </div>
                                                     <div class="row">
                                                        <div class="form-group">
                                                            <label class="col-md-3 control-label" for="aantalkm">Afstand (km)</label>
                                                                <div class="col-md-2"><input id="aantalkm" class="form-control" type="text" onChange="updateMarker()" value="20" />
                                                            </div>
                                                        </div>
                                                     </div>
                                                     <div class="row">
                                                        <div class="form-group">
                                                        <label class="col-md-3 control-label" for="submit"></label>
                                                                <div class="col-md-6">
                                                                    <button type="button" id="werkgebied_prev" class="btn btn-primary mb-xl previous">Vorige</button>
                                                                    <button type="button" id="werkgebied_next" class="btn btn-primary mb-xl next">Verder</button>
                                                                </div>
                                                        </div>
                                                     </div>
                                                </fieldset>

当字段集 3 出现时，地图将无法使用。如果我删除：

style="display: none;"

地图可以工作，但只有在前 2 个字段设置为有效后才会隐藏。

Answer 1

这里的问题是 fieldset 上设置的 display:none 样式。 Google 地图需要目标元素可见才能正确初始化。在您的情况下，您可以做一些小技巧，即时创建 google 地图的元素，使用 css 将其移出视口，等待地图完全初始化（为此您可以使用 tilesloaded 事件）然后将地图节点移动到您的 fieldset。这里有一点 fiddle 可以帮助你 https://jsfiddle.net/9a2nwe2b/1/.

可以看到fieldset是隐藏的，显示后地图就可以正常使用了。

Google 地图在 jQuery Slide Up/Down 的字段集中不起作用

Google maps don't work in fieldset with jQuery Slide Up/Down

javascript

forms

jquery

google-maps

fieldset