如何將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幾乎完成了！

您不需要對數據進行任何特殊的序列化。
你可以從任何類型的前端查詢數據，你可以想象哪些給你設計自由。