如何将Geodjango与Google Maps API 3集成？

Question

我有一个包含几个字段GeoDjango内置的查询集，但希望只使用user_name和location（点场），我想在谷歌地图API 3.

多多包涵，因为我不知道一个标记使用Javascript和我有一系列的问题。
以此为概念集思广益对于一个新手来说：

1. 我的SO搜索表明，我需要序列化对象的查询集来 JSON。我使用内置的序列化模块将其转换为JSON。
   我认为JSON对象转换为views.py（让我们 称之为json_data）。这些JSON对象是否存储在PostGIS数据库中？这不是多余的吗？

2. 此外，如何在map.js（Google地图 API 3）javascript文件中引用它们？
   我想（导入？链接？）JSON对象将它们显示为位置标记。

3. 我想知道如何声明和迭代javascript变量 locations。

For var(i=0;i< locations.length;i++){[ 
[json_data.user_name, json_data.point], 
] 

var map = new google.maps.Map(document.getElementById('map'), { 
    center: new google.maps.LatLng(49.279504, -123.1162), 
    zoom: 14, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
var infowindow = new google.maps.InfoWindow(); 
var marker, i; 
for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' 
    }); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 

指导我，如果我去不必要的迂回的方式做一个简单的任务。

Answer 1

TL; DR

1. 没有，你在做什么是不是多余的，没有获取的书面从这些答案的数据库。
2. 您需要对您的API的端点进行getJSON()或类似的调用以访问数据。
3. 您可以在第二步的调用中完成并将其声明为列表。

你在想什么是非常正确的，但还有改进的余地（因而低于长期的答案）。

---

答：

前段时间我看了very good initiation tutorial on building a GIS application with geodjango and google maps。阅读它，它应该给你一个很好的开始。

读完之后，我们将遵循一种有点不同的方式，为您的前端留出更多空间（例如使用反应或任何想到的内容）。

后端：

1. 创建视图检索的JSON你想要的信息（user_name，location），使用它返回一个字典列表的values()查询集方法。
   因为我们必须JSONify名单，我们将使用JsonResponse，我们将它标记为不安全：

   from django.http import JsonResponse 
   
   def my_view(request): 
       resp = MyModel.objects.all().values('user_name', 'location') 
       return JsonResponse(list(resp), safe=False) 
   

2. 添加一个端点访问urls.py这一观点：

   urlpatterns = [ 
       ... 
       url(r'^my_endpoint/$', my_view, name='my_endpoint'), 
       ... 
   ] 
   

   现在，每当我们访问my_endpoint/我们将在我们的数据库中获得每个对象的user_name和location的JSON表示，其格式如下：

   [ 
       {user_name: a_user, location: [lat, lng]}, 
       {user_name: another_user, location: [lat, lng]}, 
       ... 
   ] 
   

移动到前端现在：

1. 使一个getJSON()或ajax()或给API和在相同的时间创建一个标记列表中的任何其它类型的呼叫（接近@MoshFeu暗示什么）：

   let map = new google.maps.Map(document.getElementById('map'), { 
       center: new google.maps.LatLng(49.279504, -123.1162), 
       zoom: 14, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
   }); 
   
   let markers = []; 
   
   $.getJSON("my_base_url/my_endpoint", function(data) { 
       $.each(data, function() { 
        markers.push(
         new google.maps.Marker({ 
          position: { 
           lat: data['location'][0], 
           lng: data['location'][1] 
          }, 
          map: map, 
          icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' 
         })  
        ); 
       }); 
   }); 
   ... 
   

我们AR几乎完成了！

您不需要对数据进行任何特殊的序列化。
你可以从任何类型的前端查询数据，你可以想象哪些给你设计自由。