在Google地图上使用Django放置标记 [英] Placing markers on Google Map With Django
问题描述
我正在使用API和HTML5地理位置，将基于存储在模型中的纬度和经度的标记放置在Google地图上。
问题是如何使用模板关键字循环遍历存储在JavaScript标签中的每个对象的lat / lon信息，我不相信可以在Django中完成。
我发现了一个类似的这里的问题在Javascript中添加带有DJango模板标签的Google地图标记我轻轻修改并放置在一个模板中，而不是一个单独的脚本文件 - 但似乎不起作用：
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％}
}
有关如何正确循环的任何见解通过存储的Django对象中的项目，使用lat，lon信息，并将其放置在使用API的Google Map上，将非常感谢。
p>我使用 django-geoposition 来管理我的地理数据
来自django.db的导入模型
从geoposition.fields导入的$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
$ b $ models.CharField（max_length = 50）
kuerzel = models.CharField（max_length = 3）
kn_nr = models.CharField（max_length = 5）
beschreibung = models.CharField（max_length = 300）
adresse = models.CharField（max_length = 100）
position = GeopositionField（）
<来自geo.models的p> view.py
从django.shortc导入区域
uts import render_to_response，get_object_or_404，redirect
def ShowZonen（request）：
zone = Zone.objects.all（）
return render_to_response（'zonen.html'，{zone ：zone}）
def showZoneDetail（request，zone_id）：
zone = Zone.objects.get（id = zone_id）
返回render_to_response（'zonendetail .html'，{zone：zone}）
模板
zonendetail.html
< script type =text / javascriptsrc =http://maps.google ？的.com /地图/ API / JS传感器=假>< /脚本>
< script type =text / javascript>
var map;
函数initialize（）{
var mapDiv = document.getElementById（'map-canvas'）;
map = new google.maps.Map（mapDiv，{
center：new google.maps.LatLng（48.208174,16.373819），
zoom：12，
mapTypeId：google。 maps.MapTypeId.ROADMAP
}）;
google.maps.event.addListenerOnce（map，'tilesloaded'，addMarkers）;
}
函数addMarkers（）{
{％为区域％中的标记}
var point = new google.maps.LatLng（{{ mark.position.latitude}}，{{mark.position.longitude}}）;
var image ='{{STATIC_PREFIX}}'+'checkmark.png';
var marker = new google.maps.Marker（{
position：point，
map：map，
icon：image，
url：'http：// 172.16.0.101:8882/zone/'+ {{mark.id}}，
title：'{{mark.id}}'，
}）;
marker ['infowindow'] = new google.maps.InfoWindow（{
content：< h1> {{mark.name}}< / h1>< br> {{mark。 name}}< p>< a href = \http：\ / \ / 172.16.0.101：8882\ / zone\ / {{mark.id}} \> {{mark .name}}< / a>，
}）;
google.maps.event.addListener（marker，'click'，function（）{
//window.location.href = this.url;
this ['infowindow']。open （map，this）;
}）;
google.maps.event.addListener（marker，'mouseover'，function（）{
// this ['infowindow']。open（map，this）;
}）;
google.maps.event.addListener（marker，'mouseout'，function（）{
// this ['infowindow']。close（map，this）;
}）;
{％endfor％}
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
I'm trying to place markers based on the latitude and longitude stored in a model on a Google Map using the API and HTML5 geolocation.
The issue is how to loop through the lat/lon info for each object stored within JavaScript tags using template keywords, which I don't believe can be done in Django.
I found a similar question here Adding Google Map Markers with DJango Template Tags in Javascript which I mildly modified and placed within a template – not a separate script file – but it doesn't seem to work:
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 %}
}
Any insight on how to properly loop through items in a stored Django object with lat, lon info and place these on a Google Map using the API would be very appreciated.
I use django-geoposition to manage my geodata
from django.db import models
from geoposition.fields import GeopositionField
class Zone(models.Model):
name = models.CharField(max_length = 50 )
kuerzel = models.CharField(max_length = 3 )
kn_nr = models.CharField(max_length = 5 )
beschreibung = models.CharField(max_length = 300 )
adresse = models.CharField(max_length = 100 )
position = GeopositionField()
view.py
from geo.models import Zone
from django.shortcuts import render_to_response, get_object_or_404, redirect
def ShowZonen(request):
zone=Zone.objects.all()
return render_to_response('zonen.html', {"zone": zone})
def showZoneDetail(request, zone_id):
zone=Zone.objects.get(id=zone_id)
return render_to_response('zonendetail.html', {"zone": zone})
template zonendetail.html
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(48.208174,16.373819),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers() {
{% for mark in zone %}
var point = new google.maps.LatLng({{mark.position.latitude}},{{mark.position.longitude}});
var image = '{{ STATIC_PREFIX }}'+ 'checkmark.png';
var marker = new google.maps.Marker({
position: point,
map: map,
icon: image,
url: 'http://172.16.0.101:8882/zone/' + {{mark.id}},
title: '{{ mark.id }}',
});
marker['infowindow'] = new google.maps.InfoWindow({
content: "<h1>{{mark.name}}</h1> <br> {{ mark.name }} <p> <a href=\"http:\/\/172.16.0.101:8882\/zone\/{{ mark.id }}\"> {{ mark.name }}</a>",
});
google.maps.event.addListener(marker, 'click', function() {
//window.location.href = this.url;
this['infowindow'].open(map, this);
});
google.maps.event.addListener(marker, 'mouseover', function() {
// this['infowindow'].open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
// this['infowindow'].close(map, this);
});
{% endfor %}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
这篇关于在Google地图上使用Django放置标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
