Question

Bootstrap 2.3.2导航标签略有问题，并以我的gmaps4rails标记为中心。我尝试了几种解决方案无济于事。目前，标记位于左上角，只是在div的视野之外。

显示

<ul class="nav nav-pills">
            <li class="active"><a href="#seven" data-toggle="tab">Last 7 days</a></li>
            <li><a href="#day" data-toggle="tab">Last 24 hours</a></li>
            <li><a href="#month" data-toggle="tab">Last 30 days</a></li>
            <li><a href="#location" data-toggle="tab">Location of <%= @soil_temperature.property %></a></li>
        </ul>

    <div class="tab-content">

        <div class="tab-pane active" id="seven" style="width: 100%;">
            <%= high_chart("chart", @sevendays) %>
        </div>

        <div class="tab-pane" id="day" style="width: 100%;">
            <%= high_chart("chart2", @day) %>
        </div>

        <div class="tab-pane" id="month" style="width: 100%;">
            <%= high_chart("chart3", @month) %>
        </div>

        <div class="tab-pane" id="location" style="width: 100%;">
            <div id="map" style='width: 100%; height: 600px;'></div>
        </div>

    </div>

<script type="text/javascript">
    var mapOptions = { mapTypeId: google.maps.MapTypeId.HYBRID, Zoom: 8 };
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: mapOptions, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%= raw @hash.to_json %>);
    handler.map.centerOn(markers[0]); 
    handler.getMap().setZoom(8);

        $('a[href="#location"]').on('shown', function(e) {
             google.maps.event.trigger(map, "resize");
         });
  });
</script>

Answer 1

尝试：

<script type="text/javascript">
    function createMap(){ 
      var mapOptions = { mapTypeId: google.maps.MapTypeId.HYBRID, Zoom: 8 };
      handler = Gmaps.build('Google');
      handler.buildMap({ provider: mapOptions, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers(<%= raw @hash.to_json %>);
      handler.map.centerOn(markers[0]); 
      handler.getMap().setZoom(8);
    }
    $('a[href="#location"]').on('shown', function(e) {
      createMap();
    });
  });
</script>

Answer 2

确定。解决了它。这是与bootstrap 2.3.2一起使用的最终解决方案。谢谢你帮助apneadiving。

<script type="text/javascript">

    $('a[href="#location"]').on('shown', function(e) {
    var mapOptions = { mapTypeId: google.maps.MapTypeId.HYBRID, Zoom: 8 };
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: mapOptions, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%= raw @hash.to_json %>);
    handler.map.centerOn(markers[0]); 
    handler.getMap().setZoom(8);
    google.maps.event.trigger(map, "resize");
    });
  });

</script>

Bootstrap Nav选项卡和gmaps4rails

2 个答案: