0

この問題を解決するのに非常に苛立たしい時間を過ごしています。ユーザーの緯度と経度を自動的に保存するモデルがあります。その情報を使用して、そのモデルの各インスタンスの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 %}
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 に答える