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地图开发人员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);

我的问题是，{coordinate for 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。

Pointfield与geodjango，javascript和谷歌地图

1 个答案: