Question

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

<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;"

地图可以正常工作，但是直到前两个字段设置为valide才会隐藏。

Answer 1

此处的问题是"&#38 ;"上设置的display:none样式。 Google地图需要目标元素才能正确初始化。在你的情况下你可以做一个小技巧，动态创建谷歌地图的元素，使用css移出视口，等到地图完全初始化（为此你可以使用fieldset事件），然后将地图节点移动到tilesloaded。这是一个小小的小提琴，可以帮助你https://jsfiddle.net/9a2nwe2b/1/。

您可以看到fieldset已隐藏，显示后地图完全正常工作。

使用jQuery Slide Up / Down，Google地图在fieldset中不起作用

1 个答案: