javascript - 在 Javascript 中使用 Django 变量与 Google API 一起使用

标签 javascript django google-maps-api-3

我正在开发一个 Django 应用程序,它在一页上获取一个位置并在数据库中搜索该区域的房地产列表,并在下一页返回结果。第二页还显示在第一页输入的位置 我想知道我的代码出了什么问题 我通过“ghar”对象访问该变量的值并将其存储在 javascript 中称为地址的变量中 我的 Header 脚本和 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模型存储在数据库中的具有place属性的对象的名称

我对此做了一些改动 这就是我目前所坚持的

好的...我试过做这件事... 我已将我的 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 的全局变量

然而相应的 map 没有显示在 HTML 页面中

您认为这是什么原因? 我哪里错了

最佳答案

您的 Javascript 文件是否由 Django 处理?如果您使用 staticfiles应用程序,或让您的 Web 服务器直接为静态文件提供服务,您的变量将永远不会被替换。

你有两个选择:

  • 要么提供动态创建的 JS 代码
  • 或者声明一个全局变量。

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

对于后一种选择,您可以在模板中执行类似的操作

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

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

关于javascript - 在 Javascript 中使用 Django 变量与 Google API 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5920877/

相关文章:

google-maps - 如何保护我的 api key ?

javascript - KnockoutJS,使用可订阅。回调目标

Chrome 更新后 JavaScript 无法正常工作

Django,具有多个域的 SESSION_COOKIE_DOMAIN

django - 如何在 Django 中删除缓存的模板片段?

google-maps-api-3 - 我可以将 Google map 方向嵌入到我自己的网站中吗?

javascript - 谷歌地图异步加载街景

javascript - 没有任何编辑器文本区域的自定义工具栏

JavaScript Ajax 登录 PHP 页面请求不起作用

python - Django 休息框架 : child object count in serializer