Gmap 在 JSP 上无法正确显示

发布于 2024-12-18 02:07:15 字数 6309 浏览 0 评论 0原文

我有一个包含以下代码的 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”中给了我一个分割的方形地图（换句话说，瓷砖），而不是完整的地图。我尝试了完全相同的事情，但是使用的jsp除了javascript google key include和map_canvas div之外什么都没有，它工作得很好

有人请帮忙！难道是因为我包含了其他库？

原文

I have a JSP with the following code which takes user input dates and then searches for cars:

<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&v=2&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" /><=50
                        <input type="radio" class="filters" name="price" value="100"  /><=100
                        <input type="radio" class="filters" name="price" value="200"  /><=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" /><=50
                        <input type="radio" class="filters" name="cubic" value="100" /><=100
                        <input type="radio" class="filters" name="cubic" value="200" /><=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>

Once the car search is done, I call function getTrailMap() to make a simple map on page.:

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();
    }
}

However,this behaves in a funny manner and gives me a splitted square map (Tiles in other word) in my "map_canvas" rather than complete map. I tried the exact same thing but with a jsp that has nothing in it except for javascript google key include and a map_canvas div and it works fine

Somebody please please help! Could it be because of other libraries I am including?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

匿名的好友 2024-12-25 02:07:15

好的！女士们先生们，我花了很长时间来调试这个问题，秘密是显示的 Gmap（或者由类似的东西返回的 Gmap 会

var map = new GMap2(document.getElementById("map_canvas") );

返回一个标签的集合（如果您使用 Firebug 检查地图）。

问题是在我的 css 文件中的某个位置，我为标签指定了 css （当然我在创建 css 时并不知道它是用于其他然而，这个 css 导致 GMap 返回的标签缩小，因此我的问题！

Allright! Ladies and Gentlemen, took me a long time to debug the issue, and the secret is that the Gmap that gets displayed ( or that is returned by something like

var map = new GMap2(document.getElementById("map_canvas") );

returns you a collection of < img > tags ( you will see it if you inspect the map using Firebug).

The issue was that somewhere in my css file, I was specifying css for < img> tag ( of course i did not knew it at the time I created the css since at that time it was meant for other image tags on my page). Nevertheless, this css was causing the < img > tags returned by GMap to shrink down and hence My problem!

回复收藏 0 原文

~没有更多了~