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

Question

我正在尝试使用API和HTML5地理定位，在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上的见解都将不胜感激。

- Why Not

---

你的JS代码有错误吗？ - ilvar

如果您能够发布实现的链接或者至少验证Django对story.x的输出是否有效，那就太好了。 - andresf

@andresf: 这是页面的实现代码：https://pastee.org/4yhdc - Why Not

我指的是一个到现场代码的链接（而不是源代码）。 - andresf

Answer 1

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

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>

- mtt2p

---

pip3安装django-geoposition时出现错误："找不到匹配的发行版"。 - DeyaEldeen

@DeyaEldeen: "pip3 install install"，两次输入'install'会导致错误。 - naccode