谷歌地图模式问题答案

【问题标题】：Google map modal issue谷歌地图模式问题
【发布时间】：2024-01-22 16:41:01
【问题描述】：

我正在尝试将谷歌地图显示到 Twitter 引导模式中。当用户第一次单击按钮 Show map 时，他能够成功地看到地图，因为我正在生成地图 onclick() 函数，但是当他关闭模式并重新打开它时，地图无法正确显示，并且 90% 的部分地图变灰，如下所示

我什至尝试了这种解决方法，删除绑定地图的整个 div 并重新生成它，但这个技巧不起作用，请告诉我如何解决我的问题。

以下是我调用显示地图的 onclick 事件的 js 函数

function mapp()
{

//google.maps.event.trigger(map, "resize");
  //$("#map_google_canvas").empty();
$("#map_google_canvas").remove();

$("#crmap").append("<div id='map_google_canvas'></div>")


    var myOptions = {
        center: new google.maps.LatLng(54, -2),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions);

        var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom");


    var geocoder = new google.maps.Geocoder();

    var markerBounds = new google.maps.LatLngBounds();

    for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode({
            'address': addressArray[i]
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                markerBounds.extend(results[0].geometry.location);
                map.fitBounds(markerBounds);
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }


}

请帮助，

谢谢

【问题讨论】：

这是完全正常的预期行为，我很难过。有许多页面，其中谷歌地图“搞砸”并在隐藏->显示->隐藏元素上显示它们。此外，谷歌地图不会每次都搞砸，它很可能会。唯一的解决方案是在其容器设置为显示/可见之前重新生成地图，这里是引导模式。当然，您只需运行一次addressArray-loop，并将地理编码器结果存储在查找表中。
问题正在从以下问题得到解决：*.com/questions/8812268/…
酷！不知道调整大小触发器。对以后有很大帮助！已对您的问题和您找到的答案进行了投票。谢谢！
您可以考虑回答自己的问题并将其标记为已接受。这是 * 上推荐的过程。其他人可能正在寻找该问题的正确答案。
@davidkonrad 我使用了使用不可见的技巧而不是隐藏我的模态并只是更改此属性，它对我有用..

标签： javascript jquery google-maps twitter-bootstrap modal-dialog

【解决方案1】：

我有同样的问题。但我发现模态显示事件存在问题。因为它不适用于某些版本的问题，所以我只是按照引导模式文档来实现它。

Bootstrap Modal Map 问题解决方案：

$(document).ready(function(){
  $('#locationMap').on('shown.bs.modal', function(){
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195));
  });
});

最后这对我有用，它可以帮助某人。

【讨论】：

尝试了此页面上的所有内容，这是唯一对我有用的。

【解决方案2】：

我正在使用 Angular，而刚刚对我有用的 ui.bootstrap.collapse AngularUI 指令是使用超时。该指令与 modals 存在相同的问题，因为直到新视图完全加载后才定义地图大小，并且地图显示为灰色区域。我所做的是将此代码添加到打开折叠内容的按钮中。也许您可以使用打开模式的按钮使其适应您的情况。

window.setTimeout(function () {
    google.maps.event.trigger(map, 'resize')
}, 0);

希望对你有帮助。

【讨论】：

【解决方案3】：

如果您使用的是 bootstrap 3，您必须这样做：

function showMap() {
        var mapOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        $('#mapmodal').on('shown.bs.modal', function () {
              google.maps.event.trigger(map, 'resize');
              map.setCenter(new google.maps.LatLng(54, -2));
            });
        $('#mapmodal').modal("show");
}

还要确保您没有为 img - 标签设置任何最大宽度或最大高度值。如果您在 CSS 样式表中这样做，请将其放在其末尾：

#map img{
    max-width:none;
    max-height:none;
}

我不确定这是否有必要，但为保存地图的 div 设置一个高度值应该是一件好事：

<div id="map" style="height:400px"></div>

我从几个 * 讨论中组装了这个。

【讨论】：

不错的完整示例。完美运行！

【解决方案4】：

如果你使用 Angular，你应该使用 $timeout 而不是 setTimeout。包装一个 $timeout 设置为 0 的函数将确保包装的函数在当前执行上下文完成后执行。在您的情况下，Google Maps API 只会在模式和保存地图的元素完全呈现后重新绘制地图。您不会看到任何灰色区域。

$timeout(function () {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598););
}, 0);

【讨论】：

【解决方案5】：

可以使用visibility:hidden 和visibility:visible 代替display:none 和display:block。这对我有用。您甚至可以为此编辑模式的 CSS。

【讨论】：

【解决方案6】：

由于您正在将地图加载到尚未定义的宽度元素中，因此您有此解决方案。

使用 latlong 初始化地图后，您应该在 google.maps 上触发调整大小事件

$('.modal').on('shown', function () {
  // also redefine center
  map.setCenter(new google.maps.LatLng(54, -2));
  google.maps.event.trigger(map, 'resize');
})

【讨论】：

如果您检查 cmets，OP 已经提到 *.com/questions/8812268/… 解决了他的问题。反正没问题

【解决方案7】：

感谢 user1012181 的回答，我解决了这个问题。我个人也很喜欢这种纯 CSS 解决方案。

div#myModalMap.modal.fade.in{    
    visibility: visible;
}

div#myModalMap.modal.fade{
    display: block;
    visibility: hidden;
}

【讨论】：

【解决方案8】：

我也遇到了这个问题，想出了这个简单的解决方案。

等到你的模态完全加载，然后在地图函数上设置timeOut事件。

$('#MyModal').on('loaded.bs.modal',function(e){
   setTimeOut(GoogleMap,500);
});

我很确定它在所有情况下都会奏效。

【讨论】：

【解决方案9】：

我将使用 uiGmapIsReady 等待 dom 准备好然后强制调整地图大小：

uiGmapIsReady.promise().then(function () {
    var map = $scope.map.control.getGMap();
    google.maps.event.trigger(map, 'resize');
});

【讨论】：

【解决方案10】：

这就是上述答案的帮助，但我不得不使用 onclick 调用主函数。

<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span>

function newMap()

{

函数 showMap() {

//your map function

}

    $('#enlargeModal').on('shown.bs.modal', function () {
          var center = fullmap.getCenter();
          google.maps.event.trigger(fullmap, 'resize');
          fullmap.setCenter(center);
    });

显示地图（）； }

【讨论】：