Gmap无法在JSP上正确显示

时间:2011-11-27 21:41:15

标签: jsp google-maps tiles

我有一个带有以下代码的JSP,它接受用户输入日期,然后搜索汽车:

<html>
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title> iGo Rentals </title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAwGwLcl2-CcoaMrZlDQE6AxQzy7yiZoZ6XHPhop-FAedreB3tuRSGgFwbze7LydSaMHFavvXbm5-tDw"
        type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.delegate.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>      
    <script type="text/javascript" src="js/jcookie.js"></script>
    <script type="text/javascript" src="js/iGo.js"></script>
    <script type="text/javascript" src="js/iGoMaps.js"></script> 
    <link rel="stylesheet" href="css/iGo.css" type="text/css"></link>
    <!-- <link rel="stylesheet" media="screen and (max-width: 640px)" href="css/iGo_small.css" type="text/css"></link> -->


</head>
    <body>
<div id="main">


    <div class="headermodule"> 
    <p>  <% if(session.getAttribute("login")!= null){
                out.print("Hello "+session.getAttribute("login")+"\n"); 
            }
        %> </p>
    <!-- Menu -->
    <a href="jsp/registration_form.jsp"> Create New Account </a> | <a href="jsp/login_form.jsp"> Login | <a href="jsp/existing_reservations.jsp"> Existing Reservations</a> 
        <p> <% 
                if(request.getParameter("message")!= null){
                    out.println(request.getParameter("message"));
                }
            %>

        </p>
    </div>
    <div id="left">

        <form  id="form1" action="">
            <div class="module">
                <!-- Pick up and drop off dates -->
                <div class="label">Pickup Date </div>
                <input type="text" id="pickup" readonly="readonly" name="pickup" class="required"></input>
                <div class="label">Return Date </div>
                <input type="text" id="dropin" readonly="readonly" name="dropin" class="required"></input>
                <input type="hidden" id ="username" name="username" value="<%=session.getAttribute("login")%>" />

            </div>
            <div class="module"> <!-- Postal code input -->
                <div class="label">Please enter your Postal Code or a part of it!</div>
                <input type="text" id="postal_code" name="postal_code" maxlength="6" />
                <br/>
                <input type="button" id="searchButton" class="getcars" value="Search!"/>
            </div>
            <div class="module">
                <!-- filters input -->
                <div class="label">Customize your car search</div>
                    <div class="module">
                        <div class="label">Enter the price range</div>
                        <input type="radio" class="filters" name="price" value="50" />&lt;=50
                        <input type="radio" class="filters" name="price" value="100"  />&lt;=100
                        <input type="radio" class="filters" name="price" value="200"  />&lt;=200
                        <input type="radio" class="filters" name="price" value="99999" checked="checked" />All
                    </div>                  
                    <div class="module">
                        <div class="label">Enter the mileage range</div>
                        <input type="radio" class="filters" name="mileage" value="10" />10>=
                        <input type="radio" class="filters" name="mileage" value="20" />20>=
                        <input type="radio" class="filters" name="mileage" value="30" />30>=
                        <input type="radio" class="filters" name="mileage" value="0"  checked="checked" />All
                    </div>
                    <div class="module">
                        <div class="label">Enter the cubic capacity range</div>
                        <input type="radio" class="filters" name="cubic" value="50" />&lt;=50
                        <input type="radio" class="filters" name="cubic" value="100" />&lt;=100
                        <input type="radio" class="filters" name="cubic" value="200" />&lt;=200
                        <input type="radio" class="filters" name="cubic" value="99999"  checked="checked" />All
                    </div>
            </div>
        </form>
    </div>
    <div id="car_depot">
    </div>
    <div id="rentit">
        <p class="module"> Your Reservation Cart lives to serve you. Give it a purpose, Add a Car Now! </p>         
    </div>  
</div>
<div id="map_canvas"></div>
<script type="text/javascript">
    window.onload=checkCookies; 
</script>
</body>

完成汽车搜索后,我调用函数getTrailMap()在页面上制作一个简单的地图。:

function getTrailMap() {    
    if (GBrowserIsCompatible()) {
        // position Map on home.jsp
        var map = new GMap2(document.getElementById("map_canvas") );

        map.addControl(new GLargeMapControl());
        //map.addControl(new GSmallMapControl());
        //map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(43.785362,-79.185649), 10);
        //map.enableScrollWheelZoom();
    }
}

然而,这表现得很有趣,并且在我的“map_canvas”中给了我一个分裂的方形图(其他单词中的Tiles)而不是完整的地图。我尝试了完全相同的东西,但有一个没有任何东西的jsp除了javascript google key include和map_canvas div,它工作正常

有人请帮忙!可能是因为我包括的其他图书馆?

1 个答案:

答案 0 :(得分:0)

奥莱特!女士们,先生们,我花了很长时间来调试这个问题,秘诀就是显示的Gmap(或者像

那样返回的)
var map = new GMap2(document.getElementById("map_canvas") );

返回&lt;的集合img&gt;标签(如果你使用Firebug检查地图,你会看到它。)

问题是在我的css文件中的某个地方,我正在为&lt;指定css。 IMG&GT;标签(当然我在创建css的时候并不知道它,因为那时我的页面上有其他图像标签)。然而,这个css导致&lt; img&gt; GMap返回的标签缩小,因此我的问题!