İşaretleyicileri Google Map ile yerleştirme Django ile

Question

İşaretçileri, API ve HTML5 coğrafi konumu kullanarak bir Google Harita'daki bir modelde depolanan enlem ve boylamı temel alarak işaretlemeye çalışıyorum.

Sorun, Django'da yapılabileceğine inandığım şablon anahtar sözcüklerini kullanarak JavaScript etiketlerinde saklanan her nesne için lat/lon bilgisinin içinden nasıl geçeceğidir. değil ayrı bir komut dosyası - -

ben hafif değiştirilmiş ve bir şablon içine yerleştirilen hangi burada Adding Google Map Markers with DJango Template Tags in Javascript benzer bir soru bulundu ancak çalışmak için görünmüyor:

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 %}  
    } 

nasıl düzgün döngü Herhangi bir fikir depolanmış bir Django nesnesindeki öğelerden lat, lon bilgisi ile ve bunları API kullanarak bir Google Haritasına yerleştirmek çok takdir edilecektir.

Answer 1

Ben herhangi bir hatayla i var mı

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}) 

şablon zonendetail.html benim coğrafi veri

<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>