Question

一开始看起来很奇怪，但请耐心等待：

我在网页上有一个地址列表我现在尝试做的是为每个地址绘制一个谷歌地图，但如果我同时显示所有这些地图，那将是一个非常混乱的页面，因此它们默认不显示。
每个表格行在<tr>标记中都有一个特定ID，我不仅可以识别该行，还可以识别其中的邮政编码和城市名称以及相应的Google地图。
当用户单击表中的某个项时，Map应向下滑动并通过JQuery UI中的.slideToggle()显示。

有点这样做，但是在我调整浏览器窗口大小或将地图转换为全屏模式或Google地图与容器重叠到无法使用页面之前，谷歌地图都无法正确显示。<登记/> Screenshot (Map hidden)
Screenshot (Map displayed)

此示例是通过在切换显示后初始化Map生成的如果我在切换时对其进行初始化，则地图根本不会显示，直到我更改窗口大小或切换到全屏。此外，地图标记不在中心，而是在左上角。

这是我的代码：

<script type="text/javascript">
        function toggleMap(id) {
            var map = document.getElementById("map" + id);
            console.log(map);
            var zip = document.getElementById("zip" + id).innerHTML;
            var city = document.getElementById("city" + id).innerHTML;
            var address = zip + " " + city
            var mapElement = \$("#map" + id);
            mapElement.slideToggle("fast");
            if (!\$('#map' + id).data('googleMap')) {
                var googleMap = new google.maps.Map(map, { zoom: 10, center: { lat: 51.1657, lng: 10.4515 } });
                console.log(googleMap);
                var coordinates;
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === 'OK') {
                        coordinates = results[0].geometry.location;
                        googleMap.setCenter(coordinates);
                        var marker = new google.maps.Marker({ position: coordinates, map: googleMap });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
                \$('#' + map.id).data('googleMap', googleMap);
                google.maps.event.trigger(googleMap, 'resize');
            };
        }
    </script>

    <script type="text/javascript">
        function initMaps() {
            var allMaps = document.querySelectorAll('tr[id^="map"]');
            allMaps.forEach(function(map){
                var mapID = map.id.split("map")[1];
                var zip = document.getElementById("zip" + mapID).innerHTML;
                var city = document.getElementById("city" + mapID).innerHTML;
                var address = zip + " " + city
                var googleMap = new google.maps.Map(map, { zoom: 10, center: { lat: 51.1657, lng: 10.4515 } });
                var coordinates;
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === 'OK') {
                        coordinates = results[0].geometry.location;
                        googleMap.setCenter(coordinates);
                        var marker = new google.maps.Marker({ position: coordinates, map: googleMap });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            });
        }
    </script>

google.maps.event.trigger(googleMap, 'resize');行来自this thread中的建议答案，但它似乎并不能解决我的问题。

我必须补充一点，我通常不会同时调用这两个函数。我要么在加载时初始化地图，然后只是打开和关闭它们，或者在第一次切换时初始化它们。数据输入＆＃39; googleMap＆＃39;包含元素本身的确保我不会多次初始化Map。

我真的希望有人可以帮助我。我似乎在茫然......

Google地图与容器重叠

0 个答案: