在谷歌地图信息窗口中使用json序列化Django对象的链接

Question

我正在将我的Django模型中的数据序列化为json，并将该信息放在Google地图的信息窗口中。到目前为止，它工作正常。但我还想包含一个指向每个实际对象的链接，以便用户可以单击将他们带到完整报告的 URL。我不确定如何使用 json 完成此操作，因为我仍在处理它。

本质上是使用 json 在 Google 地图信息窗口中提供指向实际对象的链接，在本例中是"故事"模型。我希望在 Google 地图信息窗口中显示指向实际故事的链接。

这是我的观点：

def all_stories(request):
    if not request.user.is_authenticated():
        return redirect("django.contrib.auth.views.login")
    all_stories = Story.objects.select_related().order_by('-date')
    storyJson = []
    for story in all_stories:
        storyJson.append({
            "latitude": story.latitude,
            "longitude": story.longitude,
                "headline": story.title,
                "copy": story.copy,
                'author': story.author.username,
                'topic': story.topic
        })
    return render_to_response("report/storyline.html",
                                {'stories': all_stories,
                                "story_Json":json.dumps(storyJson)},
                                context_instance=RequestContext(request))

这是模板中与显示当前信息相关的部分：

    function loadMarkers(stories){
    for (i=0;i<stories.length;i++) {
        var story = stories[i];
        (function(story) {
            var pinColor = "69f2ff";
                var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=S|" + pinColor,
                    new google.maps.Size(21, 34),
                    new google.maps.Point(0,0),
                    new google.maps.Point(10, 34));
          var point = new google.maps.LatLng(story.latitude, story.longitude);
          var marker = new google.maps.Marker({position: point, map: map, icon: pinImage});
          var infowindow = new google.maps.InfoWindow({
            content: '<div >'+
                '<div >'+
                '</div>'+
                '<h2 class="firstHeading">'+story.headline+'</h2>'+
                '<div>'+
                '<p>'+story.author+'</p>'+
                '<p>'+story.topic+'</p>'+
                '<p>'+story.copy+'</p>'+
                '</div>'+
                '</div>'
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,this);
          });
        })(story);
    }
}

有关如何实现此目的的任何见解将不胜感激。

Answer 1

部分答案涉及您尚未发布的内容，因此我将做出假设，您可以推断。

您真正需要做的就是为每个故事使用一个reverse()值，并将它们包含在 json 值中。反向需要指向指向单个故事的视图的 URL。假设您的单个故事视图如下所示：

url(r'^story/(d+)/$', 'story.views.story_details', name="story-details")

现在，在为每个故事构建字典值时，请包含一个反向 URL：

from django.core.urlresolvers import reverse
host_url = "http://%s" % request.META['HTTP_HOST']
for story in all_stories:
    full_url = '%s%s' % (host_url, reverse('story-details', args=(story.id,)))
    storyJson.append({
        "latitude": story.latitude,
        "longitude": story.longitude,
            "headline": story.title,
            "copy": story.copy,
            'author': story.author.username,
        'topic': story.topic,
        'url': full_url
    })

这部分只是一个假设，但我认为您的"信息窗口"格式可能如下所示：

content: '<div >'+
...
'<a href="'+story.url+'">View Story</a>'+
'</div>'+