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

我有一个包含多个字段的 geodjango 查询集，但只想使用user_name and location（一个点字段）我想将其用作谷歌地图 API 3 中的标记。

请耐心等待，因为我不懂 JavaScript，而且我有一系列问题。
将此视为新手的概念性头脑风暴：

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

2. 此外，我如何在map.js（谷歌地图 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));
}

如果我用不必要的复杂方式来完成一项简单的任务，请指导我。

TL;DR

1. 不，您所做的并不是多余的，并且这些答案不会将任何内容写入数据库。
2. 你需要做一个getJSON()或对 API 端点的类似调用来访问数据。
3. 您可以在第二步的调用中执行此操作并将其声明为列表。

您的想法几乎是正确的，但还有改进的空间（因此下面有长答案）。

Answer:

前段时间我读到一篇关于使用 geodjango 和 google 地图构建 GIS 应用程序的非常好的入门教程 https://github.com/invisibleroads/invisibleroads-tutorials/blob/master/geodjango-googlemaps-build.rst#view-waypoints。阅读它，它会给你一个很好的起点。

在您阅读完本文后，我们将遵循一种稍微不同的方式，为您的前端留出更多的空间（例如使用反应或任何想到的）。

后端：

1. 创建一个视图来检索您想要的信息（user_name, location) 作为 JSON，使用values() https://docs.djangoproject.com/en/1.11/ref/models/querysets/#django.db.models.query.QuerySet.valuesqueryset 方法返回字典列表。
   由于我们必须对列表进行 JSONify，因此我们将使用JsonResponse https://docs.djangoproject.com/en/1.10/ref/request-response/#jsonresponse-objects我们将其标记为不安全：

   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/我们将得到每个对象的 JSON 表示user_name and location在我们的数据库中，它看起来像这样：

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

现在转向前端：

1. Make a getJSON() or an 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'
               })     
           );
       });
   });
   ...
   

我们已经完成了！

您不需要对数据进行任何特殊的序列化。
您可以从您可以想象的任何类型的前端查询数据，这为您提供了设计自由。