Gmap не отображается должным образом на JSP - PullRequest
Новая
       48

Gmap не отображается должным образом на JSP

0 голосов
/ 28 ноября 2011

У меня есть 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();
    }
}

Однако, это ведет себя странно и дает мне расколотую квадратную карту (другими словами, Tiles) в моей "map_canvas", а не полную карту.Я попробовал ту же самую вещь, но с jsp, в котором нет ничего, кроме javascript google key include и div map_canvas, и он отлично работает

Кто-нибудь, пожалуйста, помогите!Может ли это быть из-за других библиотек, которые я включаю?

1 Ответ

0 голосов
/ 28 ноября 2011

Хорошо! Дамы и господа, у меня ушло много времени на отладку проблемы, и секрет в том, что отображаемое Gmap (или возвращаемое чем-то вроде 

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

возвращает вам коллекцию тегов image(вы увидите это, если осмотрите карту с помощью Firebug).

Проблема заключалась в том, что где-то в моем css-файле я указывал css для тега image(конечно, я не знал об этом во время создания css, поскольку в то время он предназначался для других тегов изображений на моем страница). Тем не менее, этот css приводил к уменьшению тегов image, возвращаемых GMap, и, следовательно, моей проблеме!

...