Использование переменной Django в Javascript для использования с Google API - PullRequest
2 голосов
/ 07 мая 2011

Я занимаюсь разработкой приложения Django, которое берет местоположение на одной странице, ищет в базе данных списки недвижимости в этой области и возвращает результаты на следующей странице. Вторая страница также отображает местоположение, введенное на странице 1 я хочу знать, что не так с моим кодом я получаю доступ к значению этой переменной через объект 'ghar' и храню его в переменной с именем address в JavaScript Сценарии моего заголовка и HTML-файл

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type=text/javascript" src="{{ MEDIA_URL }}maps.js"></script>
 .....
 <div id="map_canvas"></div> 

Мой файл maps.js

 var geocoder;
 var map;
 var address ="{{ghar.place}}";
 function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

ghar - это имя объекта с атрибутом места, сохраненного в базе данных моделями django

Я сделал несколько изменений в этом Это то, что я сейчас застрял на

хорошо ... я пытался сделать это ... я поместил свой Jquery Javascript в сам файл HTML HTML-файл

<!DOCTYPE HTML>
<html>
    <head><title>Ghar Nivas</title>
        <link type="text/css" rel="stylesheet" href="{{ MEDIA_URL }}searchresult.css" />
    <link type="image/png" rel="icon" href="{{ MEDIA_URL }}gharnivaslogo.png">
    <script type="text/javscript" src="{{ MEDIA_URL }}jquery.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript">


var address = {{ area }};
var geocoder;
var map;

 function  codeaddfunc(){
            geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            geocoder.geocode( { 'address': address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                            map: map, 
                            position: results[0].geometry.location
                    });
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
        }


</script>
    </head>
    <body class="back" onload="codeaddfunc()">
    <div align="right" ><a href="/">Home</a></div>
    <img height="180" width="500" src="{{ MEDIA_URL }}ghar.png" alt="logo here"/>
        <table >
            <tr valign = "top" >
                <td width="20%" >
            <h3 class="whitecolor">Search</h3>
                    <label class="whitecolor">Price Range</label>
            <form action="/second_search/" method="get" >
                    <div class="whitecolor"  >
                    From: <input type="text" name="fromRange" placeholder="5000" id="fromRange" style="width:100px;" />&nbsp;<br/>
                    To: &nbsp;<input type="text" name="toRange" placeholder="10000" id="toRange" style="width:100px;"  />
                </div>
                <br />
                <div class="whitecolor" >
                    Specify Area: <input type="text" name="txtSearch" id="txtSearch" style="width:100px;" />
                </div>
                <input type="submit" value="Search Again" />
            </form>
                </td>
                <td bgcolor="#FFFFFF"><br/></td>
                <td>
                    <div>
                        <table width="500px">
                            <tr>
                                <td>
                {% if ghar %}
                    {% for g in ghar %}
                    <div class="whitecolor"  >
                                            <a href="/venture/{{ g.id }}/">{{ g.nameOfVenture }}</a> <br/>
                        Location: {{ g.place }}<br/>
                        Price: {{ g.price }}
                        Ownner Name: {{ g.ownerName }}<br/>
                        Owner Contact: {{ g.ownerContact }}<br/>
                    </div>
                    <hr />
                    {% endfor %}
                {% else %}
                    <p class="whitecolor" >No gharnivas matched your search criteria.</p>
                {% endif %}
                                </td>
                            </tr>
                        </table>
           </div>
                </td>
                <td >


                   <div id="map_canvas"></div>  

                </td>
            </tr>
        </table>
    </body>
</html>

даже при переходе на эту страницу и "просмотре источника" значение адреса переменной совпадает с указанным на предыдущей странице, поскольку я создал глобальную переменную в django с именем area

ДА соответствующая карта не отображается на странице HTML

Как вы думаете, в чем причина этого? где я иду не так

1 Ответ

2 голосов
/ 07 мая 2011

Ваш файл Javascript вообще обрабатывается Django?Если вы используете приложение staticfiles или разрешаете веб-серверу напрямую обслуживать статические файлы, ваша переменная никогда не будет подставлена.

У вас есть два варианта:

  • либо обслуживает код JS, который создается динамически
  • , либо объявляет глобальную переменную.

Для первого варианта вы можете сделать что-то вроде this (чтоссылка для файлов CSV, но она будет работать для любого другого типа контента).Это будет иметь тот недостаток, что вам придется каждый раз заново генерировать все файлы JS для этой переменной.

Для последнего варианта вы можете сделать что-то подобное в своем шаблоне

<script type=text/javascript">var address = "{{ ghar.place|escapejs }}";</script>

Каквариант, вместо использования глобальной переменной, вы можете передать ее в качестве аргумента функции.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...