使用Javascript中的Django变量与谷歌API一起使用

I am developing a Django Application that takes a location on one page and searches the database for real estate listings in that area and returns the results on the next page. The Second page also displays location entered in page 1 i want to know what is going wrong with my code i am access the value of that variable through 'ghar' object and storing it in a variable called address in javascript My Header scripts and html file are

我正在开发一个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>

My maps.js file is

我的地图。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 is the name of the object that has the place attribute stored in the database by django models

ghar是对象的名称，该对象具有django模型存储在数据库中的place属性

I HAVE MADE A FEW CHANGES TO THIS This is what i am currently stuck at

我对此做了一些改变，这就是我目前所做的

ok...i tried doing this thing... i have placed my Jquery javascript in the HTML file itself the HTML file is

好吧……我试着做这件事……我已经将Jquery javascript放在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>

even on going to this page and "viewing the source" the value of the variable address comes as the one specified in the previous page as i have created a global variable in django called area

即使是在访问这个页面并“查看源”时，变量地址的值也与前一页中指定的值一样，因为我在django中创建了一个全局变量，名为area

YET the corresponding map does not show up in the HTML page

但是相应的映射并没有显示在HTML页面中

What do you think is the reason for this? where am i going wrong

你认为原因是什么?我哪里做错了

1 个解决方案

#1

Is your Javascript file processed by Django at all? If you are using the staticfiles application, or letting your web server directly serve the static files, your variable will never be substituted.

你的Javascript文件被Django处理了吗?如果您正在使用staticfiles应用程序，或者让您的web服务器直接服务于静态文件，那么您的变量将永远不会被替换。

You have two choices:

你有两个选择:

either serve JS code which is created dinamically
要么服务于创建dinamically的JS代码。
or declare a global variable.
或者声明一个全局变量。

For the former option, you can do something like this (that reference is for CSV files, but it would work for any other content type). This would have the disadvantage that you have to regenerate your whole JS files each time for that variable.

对于前一个选项，您可以做类似的事情(该引用用于CSV文件，但它适用于任何其他内容类型)。这样做的缺点是每次都要为该变量重新生成整个JS文件。

For the latter option you can do something like this in your template

对于后者，可以在模板中执行类似的操作

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

As a variant, instead of using a global variable, you can pass it as an argument to a function.

作为变量，您可以将它作为参数传递给函数，而不是使用全局变量。

#1