2012-05-31 9 views
5

API 및 HTML5 위치 정보를 사용하여 Google지도의 모델에 저장된 위도 및 경도에 따라 마커를 배치하려고합니다.장고로 Google지도에 마커 배치

문제는 장고에서 수행 할 수 없다고 생각되는 템플릿 키워드를 사용하여 JavaScript 태그 내에 저장된 각 개체에 대한 위도/경도 정보를 반복하는 방법입니다. 아닌 별도의 스크립트 파일 - -

은 제가 약간 수정 템플릿 내에 배치하는 여기 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 %}  
    } 

방법을 제대로 루프에 어떤 통찰력을 위도, 경도 정보가 저장된 Django 객체의 항목을 통해 API를 사용하여 Google지도에 배치하면 매우 유용 할 것입니다.

+0

을 관리 할 수 ​​django-geoposition를 사용 nJS? – ilvar

+0

구현에 대한 링크를 게시하거나 최소한 storyx의 Django 출력이 유효한 값인지 확인하는 것이 좋을 것입니다. – andresf

+0

@andresf : 다음은 페이지 구현입니다. https://pastee.org/4yhdc –

답변

8

나는 당신이 어떤 오류가 난이 있습니까

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

템플릿 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> 
관련 문제