Question

我试图在Bootstrap 3模式中加载Google Map。想法是你有不同的按钮，在模态内打开不同的地图。

问题是在打开第一个模态（并关闭它）后，第二个模态不能正确渲染地图。

HTML

<button data-lat="40.7053111" data-lng="-74.2581861" class="btn showMap">New York</button>
<button data-lat="34.0458784" data-lng="-118.2502403" class="btn showMap">Los Angeles</button>

JS

$(document).ready(function() {
    $('.showMap').click(function() {
        mapInit($(this).data('lat'), $(this).data('lng'));
   });
});

function mapInit(lat, lng) {
    var modalElm = $('#mapModal');
    var myLatlng = new google.maps.LatLng(lat, lng);
    var myOptions = { zoom: 10, center: myLatlng };
    map = new google.maps.Map($('#map-canvas')[0], myOptions);
    var marker = new google.maps.Marker({ position: myLatlng, map: map });

    modalElm.modal('show');
    modalElm.on('shown.bs.modal', function() {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(myLatlng);
    });
}

JS FIDDLE DEMO

感谢您的帮助

Answer 1

它与画布第一次清除后的加载时间有关。如果将类淡化添加到模态类中，则会导致延迟并一次又一次地完全加载。我通过在你的模态体中添加一个新的<div id ="map-canvas">并稍微改变你的css属性来改进这个小提琴，使你的地图看起来更清晰。这是小提琴http://jsfiddle.net/zpj0jefu/8/如果这有助于你，请将其作为接受的答案。如果没有，请告诉我，我会看到我可以做些什么来改变它。：）

在Bootstrap模式中启动Google Map

1 个答案: