26

Google Maps V3 部分加载在左上角。我尝试了以下方法：

  • google.maps.event.trigger(map, 'resize');地图初始化后添加。

  • 重新排列<script>索引文件中的标签

但没有一个对我有用。如何解决这个问题。这个问题有官方的错误和解决方案吗？

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from LayoutIt!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap css files -->
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheets/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="stylesheets/style.css" rel="stylesheet">
  </head>
  <body>
    <div id="contentbar">
      <div id="dashboard-content" class="contentbar-main">
        Some Content
      </div>
      <div id="summary-content" class="contentbar-main" style="display:none;">
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="span12">
              <div class="row-fluid">
                <div class="span7" id="sidebarid">
                  <p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
                </div>
                <div class="span5" id="contentbarid">
                  <div class="row-fluid">
                    <div class="span12">
                      <input type="button" value="toggle" id="toggle-button">
                      <div id="map-canvas" style="width:100%;height:400px;"></div>
                    </div>
                  </div>
                  <div class="row-fluid">
                    <div class="span12">
                      <p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- jQuery scripts -->
      <script type="text/javascript" src="javascripts/jquery.min.js"></script>
      <!-- Bootstrap script -->
      <script type="text/javascript" src="javascripts/bootstrap.min.js"></script>
      <!-- My basic script file-->
      <script type="text/javascript" src="javascripts/my-script.js"></script>
      <!--Google Map server url-->
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAngjBDpe4ep15u5dvlnbZbn1ghA5uISZY&sensor=false"></script>
    </body>
  </html>

我的脚本.js

var map;
$(document).ready(function(){
  google.maps.visualRefresh = true;
    initializeMap();
});

//Load Map in Summary Tab
function initializeMap() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
  google.maps.event.trigger(map, 'resize');
}
4

7 回答 7

57

我以前也遇到过这个问题，并通过等待地图的“空闲”状态（即完成时）然后调用调整大小来修复它： 

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});
于 2013-06-12T07:53:06.773 回答
10

我认为你的地图在你创建它的时候是隐藏的：display:none在#summary-contentdiv 上有一个地图嵌套在里面。

您应该尝试在该 div 可见之后resize而不是在初始化期间触发事件。

事实上，您可能只是initializeMap()在 div 可见时调用您的函数事件，而不是在您的.ready()函数中调用它。

于 2013-06-12T07:32:19.533 回答
4

除了第一个加载的地图显示在左上角之外，我遇到了所有地图的问题，而地图的其余部分尚未加载，因此显示为灰色。

挠头了一段时间，但设法解决了这个问题：

google.maps.event.addListenerOnce(map, 'idle', function() {
       google.maps.event.trigger(map, 'resize');
       map.setCenter(latLng);
    });

感谢 Ian Devlin 和 d.raev，这是一个简单的解决方案，我只想说声谢谢并分享为我解决它的代码，因为我还不能评论或投票！

我在创建地图后调用它：

map = new google.maps.Map(document.getElementById("business-location-"+business_username), map_options);

所以如果你有这个问题，把它放在你创建地图的地方！

于 2015-04-02T12:26:26.760 回答
2

谷歌地图不能很好地与 Bootstrap 配合使用。尝试将以下 CSS 添加到您的地图元素

#map-canvas img {
  max-width: none;
}

Twitter Bootstrap CSS 影响谷歌地图

于 2013-06-12T07:37:15.873 回答
1

我刚刚遇到了类似的问题（加载到容器中的地图用动画展开）

正如@Ian Devlin 解决方案的一部分，是resize在所有可见之后触发事件。
第二部分是固定中心（因为它通常在左上角）：

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
   map.setCenter(center); // var center = new google.maps.LatLng(50,3,10.9);
});
于 2014-03-28T08:45:53.967 回答
0

我知道这是一个相对古老的问题，但是，我今天遇到了这个问题并找到了解决方案。它可能（可能没有）对人们有帮助，但是如果您需要在点击时显示 Google 地图，那么如果您在此事件中调用您的initilise()函数并延迟它，如下面的代码所示。

谷歌地图 API 函数 - 初始化（）；

var locationLondon = new google.maps.LatLng(51.508742, -0.120850);
var map;    

    function initialise(location){
        //Object to define properties
        var mapProp = {
            center: locationLondon,
            zoom: 15,
            disableDefaultUI:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        //Map Marker
        var marker = new google.maps.Marker({
            position: locationLondon,
            map: map
        });

        marker.setMap(map);
    };

我的 jQuery 事件调用

    $( document ).ready(function(){
        $( '#maps-container' ).hide();
        $( '#card-1 .fa-info-circle' ).click(function(event){
            event.stopPropagation();
            $( '#maps-container' ).delay( 1000 ).fadeIn( 'slow' );
            $( '#map-load' ).delay( 1000 ).fadeOut( 'slow' );
            setTimeout(initialise, 1000);
        });
    });
  • '#map-load'是地图初始加载的预加载器屏幕
  • '#maps-container'是 Google 地图 (#googleMap) 的容器
于 2015-04-01T14:07:52.600 回答
0

使用显示格式的 pageshow 事件。它对我有用。

$(document).on('pageshow', '[data-role="page"]#mapPage' , function(){
initialize(); });

于 2015-07-28T10:15:12.037 回答