7

Google Maps API V3 をインストールしましたが、サイズ変更機能がうまく動作しません。リンクをクリックするとドロップダウンする区画にマップを表示するスクリプトを配置しましたが、側面に灰色の領域が表示されます。私が理解できることから、分割を表示するスクリプトにサイズ変更機能が必要な場合を読んだことがありますが、適切に実装するのに問題があります。

ここに画像の説明を入力

分割 (class="content") を明らかにするコードは次のとおりです。

    $(function() {
$('.action').click(function() {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    content.slideToggle('fast');
});

ID「マップ」のdiv内にマップがあります。

  <div class="map">
      <div id="map_canvas""></div>
  </div>

私は徹夜でサイトの他の部分に取り組んでおり、現時点ではかなりぼんやりしています。これを解決するために必要なものを投稿するのを忘れていたらごめんなさい。

前もってありがとう、BC。

4

2 に答える 2

8

Googleマップでサイズ変更を手動でスローする必要があります。

google.maps.event.trigger(map, 'resize')

参照。

アップデート

<script type="text/javascript"> 
// Global Variable
var map;

// This is a global Function
function initialize() 
{ 
  // This variable is scoped only for the initialize function,
  // it is not available to other functions scoped globally
  var myOptions = 
  { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };

  // Instead of a function scoped map variable this should be global
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.trigger(map, 'resize') 
} 
</script>

次に、次のコードに変更できます。

$(function() 
{
  $('.action').click(function() 
  {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    // this uses the callback functionality
    // to only throw the trigger after the
    // animation finishes.
    content.slideToggle('fast',
      function() 
      {
        google.maps.event.trigger(map, 'resize');
      });
  });
});

于 2012-06-26T19:37:41.863 に答える
0

ねえ、これをすばやく簡単に修正できることに気付きました。

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(42.365885, -71.258658),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    google.maps.event.trigger(map,'resize');
}

$(document).on("pageshow", "#map", function () {
    initialize();
});

「map」と呼ばれるページ div と「map-canvas」と呼ばれるマップ div を使用します。

これがしているように見えるのは、ページが表示されたときにマップを初期化することです。これにより、ユーザーがマップを開いたときにマップをロードすることでアプリの速度が低下しますが、dom などに起因するエラーは回避されます。これにより、私のphonegap + jquery mobile + google mapアプリでの地図の角/灰色の領域の問題が完全に修正されます!

于 2013-07-25T01:10:27.513 に答える