javascript - 在 Bootstrap 模式中打开 map

Question

1.当用户单击显示的谷歌地图下方的放大 map 按钮时，如何在 Bootstrap 模式中打开谷歌地图。 codepen link

当用户点击信息窗口中的在谷歌地图中查看链接时，任何可能性都会显示谷歌地图中的特定位置。

JS

     var storeArray = new Array(
     ["23.589242", "58.412586", "ST1"],["23.628695", "58.266483","ST2"],["23.622155", "58.488977","ST3"],
     ["23.239333", "58.312586", "ST4"],["23.151933", "58.312586", "ST5"],["23.609027", "58.538858", "ST6"],["23.608280", "58.538343", "ST7"],["23.607789", "58.538021", "ST8"],["23.606412", "58.537399", "ST9"]);

var myOptions = {
  center: new google.maps.LatLng(storeArray[0][0], storeArray[0][3]),
  zoom: 9,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  function testmap() {

      for (i = 0; i < storeArray.length; i++) {  
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(storeArray[i][0], storeArray[i][1]),
            map: map
         });


    var infowindow = new google.maps.InfoWindow({
        content: storeArray[i][2]

    });
    infowindow.open(map, marker); 

      }

  }
  google.maps.event.addDomListener(window, 'load', testmap);

Answer 1

这很简单。请参阅:http://codepen.io/anon/pen/qdorLN

$('#myModal').on('shown.bs.modal', function (e) {
    var mapNode = map.getDiv();
    $('#map-canvas-modal').append(mapNode);
});

1. 在模态显示事件上添加监听器
2. 使用 getDiv() 检索包含 map div 的节点功能
3. 将该节点附加到模态框内的 div

P.S.:注意不要给多个div赋予相同的id。 Id 必须始终是唯一的。