10

我正在尝试将谷歌地图显示到 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);
            }
        });
    }


}

请帮助，

谢谢

4

10 回答 10

5

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

Bootstrap 模态图问题解决方案：

$(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));
  });
});

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

于 2014-11-28T11:33:29.993 回答
4

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

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

希望能帮助到你。

于 2014-08-07T19:21:21.173 回答
2

如果您使用的是 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>

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

于 2015-02-03T19:27:18.760 回答
1

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

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

$('.modal').on('shown', function () {
  // also redefine center
  map.setCenter(new google.maps.LatLng(54, -2));
  google.maps.event.trigger(map, 'resize');
})
于 2013-09-03T07:49:45.357 回答
1

如果你使用 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);
于 2014-10-16T09:51:02.913 回答
1

可以使用andvisibility:hidden代替and 。这对我有用。您甚至可以为此编辑模式的 CSS。visibility:visibledisplay:nonedisplay:block

于 2014-12-16T22:21:52.933 回答
1

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

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

div#myModalMap.modal.fade{
    display: block;
    visibility: hidden;
}
于 2016-03-01T18:53:03.970 回答
0

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

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

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

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

于 2015-02-12T06:08:53.890 回答
0

嗯，这就是上面的答案如何帮助，但我不得不使用调用 main 函数onclick。

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

function newMap()

{

功能显示地图（）{

//your map function

} 

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

显示地图（）; }

于 2017-08-10T08:23:20.407 回答
0

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

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

于 2016-07-14T04:15:12.103 回答