Pointfield与geodjango，JavaScript和谷歌地图 [英] Pointfield with geodjango, javascript and google maps

问题描述

我试图从存储在我的数据库中的经度和纬度点显示和绘制一条线。这里是我的模型：

<$ p $（我已经删除了一些不重要的变量）

p> 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）


以下是我的看法：

<$ p $设备表（Device.objects.all（），prefix =1-）
gpsData_table = GPSDataTable（GpsLog.objects.all （请求）.configure（gpsData_table）

coordinate_list = list（GpsLog。 （），

return render

这是问题：这是我的index.html的initalise函数。坐标列表是一个类型点的列表，这样它将循环并将经纬度和长点输出到数组中。问题是，该数组不被接受为谷歌地图中的有效路径。该功能主要是从谷歌地图开发人员API复制的。

 函数初始化（）{
 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 = {}; 
 
 {％为坐标列表中的位置％} 
 path.push（（新的google.maps.LatLng（{{position.coordinates.x}}），{{position.coordinates.y }}））; 
 
 $ b $％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）; 
  

我的问题是，{％在position_list％中的位置}有什么问题，不会生成一个可以传递到Google地图的有效数组？

我真的很感谢任何帮助。

解决方案

您将路径定义为一个对象：

  var path = {}; 
  

它应该被定义为一个数组：

  var path = []; 
  

更新：看起来 LatLng仅用一个参数调用。它期望两个数字。 ）在错误的地方。

  path.push（（new new google .maps.LatLng（{{position.coordinates.x}}），{{position.coordinates.y}}））; 
  

应改为

  path.push（new google.maps.LatLng（{{position.coordinates.x}}，{{position.coordinates.y}}））; 
  

另见 jsbin示例。

I'm trying to display and plot a line from lattitude and longitude points stored in my database. Heres my code (I've removed some nonessential variables for brevity)

Here is my model:

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)

And here is my views:

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}, )

Here is the problem: this is the initalise function of my index.html. The coordinate list is a list of type point, such that it will loop through and output the lat and long points into the array. The problem is that somehow the array is not being accepted as a valid path in google maps. The function is copied mostly from the Google maps developer 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);

My question is, what is wrong with the {% for position in coordinate_list %} such that it does not generate a valid array that can be passed into google maps?

I'd really appreciate any help.

解决方案

You defined path as an object:

var path = {};

It should be defined as an array:

var path = [];

Update: It seems that LatLng() is called with one parameter only. It expects two numbers. ) is at wrong place.

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

should be changed to

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

See also example at jsbin.

这篇关于Pointfield与geodjango，JavaScript和谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！