如何将Geodjango与Google Maps API 3集成? [英] How to integrate Geodjango with Google Maps API 3?
问题描述
我有一个geodjango queryset包含几个字段,但只想使用 user_name
和位置
(一个点字段)我想用它作为google地图API 3中的一个标记。
由于我不了解Javascript而担心,因此我有一系列问题。
以新手的概念头脑风暴为例:
-
我的SO搜索建议我需要序列化queryset将
对象转换为JSON。我使用内置的串行器模块将其转换为JSON。
我认为JSON对象被转换为views.py
(让我们
称之为json_data
)。这些JSON对象是否存储在PostGIS数据库中?这不是多余的吗?
-
另外,如何在
map.js
中引用它们, (谷歌地图
API 3)javascript文件?
我想(导入?链接?)JSON对象将它们显示为位置标记。
-
我想知道如何声明和迭代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],地点[i] [2]),
地图:地图,
图标:'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));
$ / code> 如果我以不必要的复杂方式完成简单任务, p>
解决方案 TL; DR
$ b
- $ b
- 你需要做一个
getJSON()函数,
-
你在想什么是非常正确的,但是还有改进的空间(因此下面的答案很长)。
$
答案: 前段时间我读了使用geodjango和Google地图构建GIS应用程序的非常好的入门教程。阅读它后,它会给你一个很好的开始。
读完之后,我们将采用一种有点不同的方式,为您的前端留下更多空间(使用反应例如或任何想到的)。
后端:
-
创建一个视图来检索您想要的信息( user_name
, location
)作为JSON,使用 values()
queryset方法返回字典列表。
由于我们必须对列表进行JSON化,因此我们将使用 JsonResponse
,我们将其标记为不安全:
from django.http import JsonResponse
$ b $ def my_view(request):
resp = MyModel.objects.all()。values('user_name','location')
return JsonResponse(list(resp),safe = False)
-
访问 urls.py
:
urlpatterns = [
...
url(r'^ my_endpoint / $',my_view,name ='my_endpoint'),
...
]
$ c $现在每当我们访问 my_endpoint /
时,我们都会得到每个对象的JSON表示。 $ b> code> user_name
和 location
在我们的数据库中看起来像这样: [
{user_name:a_user,locat ion:[lat,lng]},
{user_name:another_user,location:[lat,lng]},
...
]
现在转到前端:
-
制作 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
});
让marker = [];
$ .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'
})
);
});
});
...
几乎完成了!
您不需要对数据进行任何特殊的序列化。
您可以从任何类型的前端你可以想象哪个给你设计自由。
I have a geodjango queryset containing several fields but want to use only user_name
and location
(a point field) which I want to use as a marker in google maps API 3.
Bear with me as I don’t know Javascript and I have a series of questions.
Take this as conceptual brainstorming for a novice:
My SO search suggests that I need to serialize the queryset objects
to JSON. I use the built-in serializer module to convert to JSON.
I think the JSON objects are converted in views.py
(let’s
call it json_data
). Are these JSON objects stored in the PostGIS database? Wouldn’t that be redundant?
Furthermore, how do I reference them in the map.js
(google maps
API 3) javascript file?
I want to (import?link?) JSON objects to display them as location markers.
I want to know how to declare and iterate the javascript variable
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));
}
Guide me if I went unnecessarily convoluted way to do a simple task.
解决方案 TL;DR
- No, what you are doing is not redundant and nothing get's written to the database from those answers.
- You need to make a
getJSON()
or similar call to your API's endpoint to access the data.
- You can do it on the 2nd step's call and declare it as a list.
What you are thinking is pretty much correct but there is room for improvement (thus the long answer below).
Answer:
Some time ago I read a very good initiation tutorial on building a GIS application with geodjango and google maps. Read it and it should give you a great jump start.
After you read that we will follow a somewhat different way which leaves more room to play around with your front-end (use react for example or whatever comes to mind).
The back-end:
Create a view to retrieve the information you want (user_name
, location
) as JSON, using the values()
queryset method which returns a list of dictionaries.
Since we have to JSONify a list, we will use JsonResponse
and we will mark it as unsafe:
from django.http import JsonResponse
def my_view(request):
resp = MyModel.objects.all().values('user_name', 'location')
return JsonResponse(list(resp), safe=False)
Add an endpoint to access that view on urls.py
:
urlpatterns = [
...
url(r'^my_endpoint/$', my_view, name='my_endpoint'),
...
]
Now whenever we access the my_endpoint/
we will get a JSON representation of every object's user_name
and location
in our database which will look like this:
[
{user_name: a_user, location: [lat, lng]},
{user_name: another_user, location: [lat, lng]},
...
]
Moving to the front-end now:
Make a getJSON()
or an ajax()
or any other type of call to the API and in the same time create a marker list (close to what @MoshFeu suggests):
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'
})
);
});
});
...
And we are pretty much done!
You don't need to make any special serialization to your data.
You can query the data from any type of front-end you can imagine which gives you designing freedom.
这篇关于如何将Geodjango与Google Maps API 3集成?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!