0

有一个非常令人沮丧的时间来解决这个问题。我有一个自动存储用户纬度和经度的模型。我正在尝试使用该信息在谷歌地图上为该模型的每个实例放置标记。看起来很简单。使用 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 %}
4

1 回答 1

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。

于 2012-06-01T17:35:10.703 回答