javascript - Pointfield 与 geodjango、javascript 和 google map

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 的初始化函数。坐标列表是一个点类型列表，这样它将循环遍历并将纬度和经度点输出到数组中。问题是不知何故该数组不被接受为谷歌地图中的有效路径。该函数主要是从 Google map 开发者 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 axis_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 .