Question

我有一个jsp页面，其中包含另一个带有谷歌地图的jsp文件。但是当我访问父页面时，包含jsp文件的div获得了一个CSS属性值“overflow：hidden”，因为它没有显示地图。

父jsp的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css"  />
<script src="<%=request.getContextPath()%>/scripts/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">
function showHeatMap(){
  $('#heatDiv').toggle(true);
  $('#exportToCSVHeatMap').removeAttr('disabled');
  $('#dummyFenceMap').style.overflow="visible";
}
</script>
</head>

<body>
      <div id="heatMapDiv" style="display:none">
  heat map
      <div class="div-inline">
        <div class="div-daily">From Date (MM/DD/YYYY)</div>
        <input type="text" name="fromDateHM" id="datepicker4" class="input-inline" />
      </div>
      <div class="div-inline">
        <div class="div-daily">To Date (MM/DD/YYYY)</div>
        <input type="text" name="toDateHM" id="datepicker5" class="input-inline" />
      </div>

      <div id="buttonDiv">
        <input type="button" value="Show Heat Map" onclick="showHeatMap()" />
        <input type="button" value="Export To CSV" id="exportToCSVHeatMap" onclick="exportToCSVHeatMap()" disabled="disabled"/>
      </div> <!-- buttonDiv -->

      <div id="heatDiv" class="heat-map">
        <div class="div-daily">Heat Map</div>
        <div id="heatMap" style="display= block; width= 800px; height= 800px; "><jsp:include page="../jsp/dummyheatmap.jsp?name=test&id=1001"></jsp:include></div>
      </div> <!-- footTraffic -->
  </div> <!-- heatMapDiv -->

</body>
</html>

包含的jsp文件代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>dummy heat map</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css"  />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #fenceMap { height: 50% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/* For Google Map.*/

function googleMapinitialize(){
var fenceAdd=new google.maps.LatLng(37.2146,121.5545);
var mapProp = {
        center:fenceAdd,
        zoom:30,
        mapTypeId:google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById("dummyFenceMap"),mapProp);

var geocoder = new google.maps.Geocoder();
var location = "2001 Gateway PI, San Jose, CA";

if(!geocoder) {
    geocoder = new google.maps.Geocoder();
}

var geocoderRequest = {
    address: location
};

var myCity = null;
var marker = null;
var infowindow = null;
geocoder.geocode(geocoderRequest, function(results, status) {
    if (status =="" || status == google.maps.GeocoderStatus.ZERO_RESULTS){
        alert("'" + location + "' not found!!!");
    } else if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        fenceAdd = new google.maps.LatLng(results[0].geometry.location.hb,results[0].geometry.location.ib);
        if (!marker) {
            marker = new google.maps.Marker({
                map: map,
                raiseOnDrag:false,
                draggable:true
            });
            marker.setPosition(results[0].geometry.location);
            google.maps.event.addListener(marker,'click',function(){
                if (!infowindow) {
                  infowindow = new google.maps.InfoWindow({
                      disableAutoPan:true,
                      maxWidth:100
                  });
                }
                var content = '<strong>' + results[0].formatted_address + '</strong>';
                infowindow.setContent(content);
                infowindow.setPosition(results[0].geometry.location);
                infowindow.open(map, marker);                   
            });

        }
    }
    myCity = new google.maps.Circle({
        center:fenceAdd,
        radius:125,
        strokeColor:"#0000ff",
        strokeOpacity:0.1,
        strokeWeight:0.1,
        fillColor:"#0000ff",
        fillOpacity:0.20,
        map:map
    });

    google.maps.event.addListener(map, 'click', function(){
        infowindow.close();
    });
    google.maps.event.addListener(map, 'dblclick', function(){
        window.open("<%=request.getContextPath() %>/jsp/googleMapPopup.jsp?fenceAddress="+$('#haddr').val(),'ADDRESSMAP','height=400,width=600');
    });
    google.maps.event.trigger(map,'resize');
});
}
google.maps.event.addDomListener(window, 'load', googleMapinitialize);
</script>
</head>
<body onload="googleMapinitialize()">
<h1>Name : <%=request.getParameter("name")%> & id : <%=request.getParameter("id")%></h1>
<div id="dummyFenceMap" style="height=80%;border:1px solid #ff0000;overflow:visible;">
</div><!-- new-div-tag2 -->
<h1>Map end</h1>
</body>
</html>

#heatMap div的高度为2 / 11px，overflow：hidden。当我将溢出属性编辑为可见时，我会看到google徽标＆amp;地图类型

任何人都可以帮我解决代码中的错误吗？

Answer 1

我通过在包含的JSP文件的'dummyFenceMap'div中添加以下样式来解决了这个问题。

style="border:1px solid #ff0000;position:relative; left:150px; top:10px; width:500px; height:400px;padding-left:15px;padding-right:15px"

添加上述样式后，Map将显示在嵌入式JSP文件中。

但面对一个新问题 - 谷歌地图显示在div休息的3/4部分是空白的。但是，当我调整浏览器窗口大小时，Google地图会正确重绘。如何解决这个问题？

包含谷歌地图的jsp文件未显示地图

1 个答案: