Question

解决这个问题非常令人沮丧。我有一个自动存储用户纬度和经度的模型。我正在尝试使用该信息在Google地图上为该模型的每个实例放置标记。看起来很简单。使用JavaScript看起来是最简单的方法，只要这些标签位于模板上，Django模板标签显然可以放在脚本标签中。但是，在模型中循环似乎并不起作用。这里可能只是一个简单的错误，但我的JavaScript很弱，Firebug说明了什么是错误的。

缺少什么？也许有更好的方法通过特定的Django视图或更好地实现此目的的Python包装器来实现此目的？非常感谢任何见解或专业知识。

这是页面：

{% extends 'base.html' %}

{% block page_title %}Stentorian{% endblock %}
{% block headline %}Stentorian Storyline{% endblock %}

 {% block content %}

<div class="row">
    <div class="span12">

        <h2>Welcome <a href="{% url profiles_profile_detail user.username %}">{{ user.username }}</a></h2>
<br />
                       <div id="map_canvas" style="width: 300px; height: 200px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA;"></div>
<br />

        <div class="accordion" id="story_accordion">


        {% for story in stories %}
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle story-header" data-toggle="collapse" data-parent="#story_accordion" href="#story_{{ story.id }}">
                        {{ story.author }} - {{ story.title }} - {{ story.date }}
                    </a>
                </div>
                <div id="story_{{ story.id }}" class="accordion-body collapse{% if forloop.counter0 == 0 %} in{% endif %}">
                         <div class="accordion-inner">
                            <!-- <h2><a href="{% url detail story.id %}">{{story.title}}</a></h2>-->
                             <span><a href="{% url profiles_profile_detail story.author.username %}}">{{story.author}}</a> </span><br>

                            <span>{{story.topic}}</span><br>
                            <span>{{story.zip_code}}</span><br>

                            <span>{{story.date}}</span><br>

                            <p>{{story.copy}}</p>
                        </div>
                    </div>
                </div>

                <br>



            {% endfor %}
            </div>

        </div>
    </div>
<script>
function mainGeo()
    {
         if (navigator.geolocation) 
            {
              navigator.geolocation.getCurrentPosition( mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true} );
        }
        else
        {
              alert("Sorry, but it looks like your browser does not support geolocation.");
        }
    }




    var map;



     function mainMap(position)
     {
           // Define the coordinates as a Google Maps LatLng Object
           var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

           // Prepare the map options
           var mapOptions =
          {
                      zoom: 15,
                      center: coords,
                      mapTypeControl: false,
                      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                      mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            // Create the map, and place it in the map_canvas div
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            // Place the initial marker
            var marker = new google.maps.Marker({
                      position: coords,
                      map: map,
                      title: "Your current location!"
            });
        }


function error() {
            alert("You have refused to display your location. You will not be able to submit stories.");
        }

mainGeo();

function loadMarkers(){
             {% for story in stories %}
            var point = new google.maps.LatLng({{story.latitude}},{{story.longitude}});
            var marker = new google.maps.Marker({
            position: point,
            map: map
        });
        {% endfor %}    
    }

loadMarkers();
    </script>
    {% endblock content %}

Answer 1

我不是Django专家，但通常当你发现自己使用服务器端代码生成javascript代码时，有一种更好的方法 - 通过调用AJAX来加载你需要的数据，或者至少定义将数据放在脚本的顶部，然后放置客户端逻辑。

//set up a method on your model that returns your markers in JSON format,
//then load via ajax using jQuery or another library
$.get('/path/to/getMapMarkers', loadMarkers);

//or use the template to define it on the page so it looks like this
var stories = [{latitude:123.345,longitude:45.567},
    {latitude:123.345,longitude:45.567},
    {latitude:123.345,longitude:45.567}];

loadMarkers(stories);

//then either way, your function could look like this:
function loadMarkers(stories){
    for (var s in stories){
        var story = story[s];
        var point = new google.maps.LatLng(story.latitude, story.longitude);
        var marker = new google.maps.Marker({position: point, map: map}});
    }
}

这不会改变代码的行为，但会清理它并提供更好的代码分离并使其更容易修复。如果您仍需要更多帮助，请发布生成的javascript。

将Django模板标签放置在用于Google地图标记的脚本标记中

1 个答案: