2

これはドロップダウン Div で、GoogleMap 以外のすべてで機能します。

マップの半分、またはおそらく 1/4 が表示されます... div を削除すると、すべて正常に動作します... または、div を使用しない回避策はありますか? アイデア...テーブル、pなどを宣言しようとしました...運が悪い...

Javascript ドロップダウン コードと Div 呼び出し

   <script type="text/javascript">
   function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";
   } else { 
   myLayer.style.display="none";
   }
   }
   </script>

  <div class=catlist>
  <table border=0 cellpadding=4>
  <tr>
  <td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td>
  <td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS 
  Map</b></a></td>
  </tr></table>
  </div>
  <div class="qlist" id="ed" style="display:none;">

  <div id="map" style="width: 500px; height: 250px;"></div>

  </div>

Google Javascript を追加しています...

これは実際の G​​oogle マップ Javascript です... Cold Fusion は # マーカーをプロットします... これは div の外側で正常に機能します... 上記のコードは正しいマップ インターフェイスを表示するために機能します... しかし、プロットのセンタリングは機能しません...そして、上記のコードが提供された左上隅にマーカーが表示されます...

  <div id="map" style="width: 500px; height: 250px;"></div>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">
  </script> 

  <script type="text/javascript"> 

  var locations = [ 
["#bsname#", #gpslat#, #gpslong#, #busid#], 
  ]; 

  var map = new google.maps.Map(document.getElementById('map'), { 
  zoom: 15, 
  center: new google.maps.LatLng(#gpslat#, #gpslong#), 
  mapTypeId: google.maps.MapTypeId.ROADMAP
  }); 

  var infowindow = new google.maps.InfoWindow(); 

  var marker, i; 

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

  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
    } 
  })(marker, i)); 
  } 

</script>
4

2 に答える 2

5

私が行った変更は次のとおりです。

  • divが展開されたときにサイズ変更をトリガーする
  • サイズ変更後の地図の中央揃え
  • マップと場所の変数をグローバルにします。

jsfiddle はここにあります:

http://jsfiddle.net/Mgp9z/9

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

// CHANGED locations and map now global so they refer to the same thing in both initialize and showElement

var locations = [ 
["a", 40.2, -88.8, "k"], 
  ]; 

var map;

function initialize() {
   map = new google.maps.Map(document.getElementById('map'), { 
  // CHANGED
      zoom: 10, 
  center: new google.maps.LatLng(40.2, -88.8), 
  mapTypeId: google.maps.MapTypeId.ROADMAP
  }); 

  var infowindow = new google.maps.InfoWindow(); 

  var marker, i; 

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

  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
    } 
  })(marker, i)); 
  } 

      }
function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";

   // *** add the trigger here ***
   google.maps.event.trigger(map, 'resize');
   var mylat=locations[0][1];
   var mylng=locations[0][2];
   map.setCenter(new google.maps.LatLng(mylat,mylng));

   } else { 
   myLayer.style.display="none";
   }
}

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
<div class=catlist>
  <table border=0 cellpadding=4>
  <tr>
Lat:   <input type="text" id="mylat" value="40.2">
Lng:   <input type="text" id="mylng" value="-88.8">
      <!-- <td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td> -->
  <td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS 
  Map</b></a></td>
  </tr></table>
  </div>
  <div class="qlist" id="ed" style="display:none;">

  <div id="map" style="width: 500px; height: 250px;"></div>

  </div>
  </body>
</html>
于 2012-04-25T20:59:25.420 に答える
1

div を表示した後にマップのサイズを変更すると、次のように動作するはずです。

ドキュメントから:「開発者は、div のサイズが変更されたときにマップ上でこのイベントをトリガーする必要があります:」google.maps.event.trigger(map, 'resize') .

編集- より具体的に説明します。もう一度お試しください

function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";

   // *** add the trigger here ***
   google.maps.event.trigger(map, 'resize')

   } else { 
   myLayer.style.display="none";
   }
}

デモ: http://jsfiddle.net/Mgp9z/

于 2012-04-23T01:01:16.097 に答える