Question

嗨，谢谢你的帮助。我有一个bootstrap 3页面，我把谷歌地图放入模态。经过多次调整和研究，阅读我能够在桌面和移动格式中正确地显示地图（地图填充模式没有灰色，没有在响应等方面突破模态）最后一个问题是现在我找到了渲染后，中心标记不会在框架内居中。也就是说，在页面重新加载地图后的某些内容将正确显示，有时候，大多数情况下都没有。这适用于Chrome，Firefox，Mozilla和Opera测试浏览器。请帮忙花费时间和小时。

以下是代码：

HTML

<!-- Google Map In Modal -->
            <!-- Button to trigger modal -->
            <p><a href="#mapmodals" data-toggle="modal" role="button" data-target="#mapModal" class="btn btn-primary"><b>Map to Satori Spa</b></a></p>  

            <!-- MAPS -->
            <div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="#mapModal" aria-hidden="true">
              <div class="modal-dialog modal-lg"">
                <div class="modal-content">
                  <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" style="color:#000;">Satori Spa Massage - Encino Ca.</h4>
                  </div>
                  <div class="modal-body">
                <div id="map-container"></div>
                  </div>
                  <div class="modal-footer">
                <button type="button" class="close" data-dismiss="modal">Close</button>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->

JS在页面底部

    <!-- Google Map In Modal -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type='text/javascript'>
            var var_map;
            var var_location = new google.maps.LatLng(34.158540,-118.493270);

     function map_init() {          

            var var_mapoptions = {  
          center: new google.maps.LatLng( 34.158540, -118.493270 ),
              zoom: 11,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: true,
              panControl:false,
              rotateControl:false,
              streetViewControl: true,
            };

            var_map = new google.maps.Map(document.getElementById("map-container"),
                var_mapoptions);

          var contentString = 
                '<div id="mapInfo">'+
                '<p style=" font-size:12px; line-height:14px; color:#000;"><strong>Satori Spa Massage</strong><br>'+
                '16545 Ventura Blvd Suite 27<br>' +
                'Encino, California,<br>91436 USA<br>'+
                'P: (818) 907-9967</p>'+
                '<a href="http://www.satorispamassage.com" target="_blank">Plan your visit</a>'+
                '</div>';

          var var_infowindow = new google.maps.InfoWindow({
            content: contentString
          });

          var var_marker = new google.maps.Marker({
            position: var_location = new google.maps.LatLng(34.158540,-118.493270),
            map: var_map,
            title:"Click for information about the Satori Spa Massage in Encino",
                  maxWidth: 200,
                  maxHeight: 200
          });

          google.maps.event.addListener(var_marker, 'click', function() {
             var_infowindow.open(var_map,var_marker);
          });
      }

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

      //start of modal google map
      $('#mapModal').on('shown.bs.modal', function () {
          google.maps.event.trigger(var_map, "resize");
          map.setCenter(new google.maps.LatLng(34.158540, -118.493270));
      initialize();
          });
</script>

实况页面在这里@ satorispamassage.com 再次感谢，任何帮助表示赞赏。

Answer 1

基本问题是您调用map方法setCenter，但变量名称为var_map。

另一个问题：有人可能会在创建地图之前打开模态，在访问变量之前测试变量：

  //start of modal google map
  $('#mapModal').on('shown.bs.modal', function () {

    //test if the map already has been created
    if(var_map){
      google.maps.event.trigger(var_map, "resize");
      var_map.setCenter(new google.maps.LatLng(34.158540, -118.493270));
    }
  });

（同时删除了initialize的调用，没有这样的功能）

在bootstrap 3模式中使用/居中谷歌地图的问题......不断变化

1 个答案: