带有 geodjango、javascript 和谷歌地图的 Pointfield

Question

我正在尝试从存储在我的数据库中的纬度和经度点显示和绘制一条线。这是我的代码（为简洁起见，我删除了一些不必要的变量）

这是我的模型：

class GpsLog(models.Model):

device=models.ForeignKey(Device,related_name="logs")
coordinates=models.PointField()

objects = models.GeoManager()
def __unicode__(self):
  return '%s %s ' % ( self.coordinates.x, self.coordinates.y)

这是我的观点：

def index(request):
device_table = DeviceTable(Device.objects.all(), prefix="1-")
gpsData_table = GPSDataTable(GpsLog.objects.all(), prefix="2-")
RequestConfig(request).configure(device_table)
RequestConfig(request).configure(gpsData_table)

coordinate_list = list(GpsLog.objects.all())

return render(request, 'index.html',
              {'table1': device_table, 'table2': gpsData_table, 'coordinate_list': coordinate_list}, )

问题来了：这是我的 index.html 的 initalise 函数。坐标列表是一个点类型的列表，这样它会循环并输出纬度和经度点到数组中。问题是，该数组在谷歌地图中没有被接受为有效路径。该函数主要从 Google 地图开发者 API 复制而来。

 function initialize() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(0, -180),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);


        var path = {};

        {% for position in coordinate_list %}
            path.push((new google.maps.LatLng({{ position.coordinates.x }}), {{ position.coordinates.y }}));


        {% endfor %}

        var tracking_map = new google.maps.Polyline({
            path: path,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        tracking_map.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

我的问题是，{% for position in coordinate_list %} 有什么问题，以至于它没有生成可以传递到谷歌地图的有效数组？

非常感谢任何帮助。

Answer 1

您将path 定义为一个对象：

var path = {};

应该定义为一个数组：

var path = [];

更新： 似乎LatLng() 仅使用一个参数调用。它需要两个数字。 ) 发错地方了。

    path.push((new google.maps.LatLng({{ position.coordinates.x }}), {{ position.coordinates.y }}));

应该改为

    path.push(new google.maps.LatLng({{ position.coordinates.x }}, {{ position.coordinates.y }}));

另见example at jsbin。