使用Django在Google地图上放置标记

我正尝试使用API和HTML5地理位置在基于Google地图上模型中存储的经度和纬度放置标记。使用Django在Google地图上放置标记

问题是如何使用模板关键字遍历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 %}  
    }

如何正确地循环任何有识之士通过存储Django对象中的项目，使用lat，lon信息并将它们放置在使用API的Google Map上将非常感激。

来源

2012-05-31 Why Not

你有任何错误我n JS？ – ilvar

如果您可以发布指向您的实现的链接，或者至少验证story.x的Django输出是否为有效值，那将会很好。 – andresf

@andresf：这里是页面执行：https：//pastee.org/4yhdc –

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

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

来源

2012-12-17 19:59:24 mtt2p

使用Django在Google地图上放置标记

回答

相关问题