我正在尝试使用 API 和 HTML5 地理定位基于存储在模型中的纬度和经度在 Google map 上放置标记。
问题是如何使用模板关键字遍历存储在 JavaScript 标签中的每个对象的纬度/经度信息,我认为这无法在 Django 中完成。
我在这里发现了一个类似的问题 Adding Google Map Markers with DJango Template Tags in Javascript我稍微修改并放置在模板中 - 不是单独的脚本文件 - 但它似乎不起作用:
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 %}
}
任何有关如何使用 lat、lon 信息正确循环存储 Django 对象中的项目并使用 API 将它们放置在 Google map 上的任何见解都将不胜感激。
最佳答案
我用 django-geoposition管理我的地理数据
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})
模板
zonedetail.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>
关于django - 使用 Django 在 Google map 上放置标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10827613/