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...

这是实际的 Google Maps 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 回答