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

Question

我有一个包含几个字段的geodjango查询集，但只想使用user_name和location（一个点字段），我想在Google Maps API 3中用作标记。

[我不懂Java语言，请多多包涵，我有一系列问题。将此作为初学者的概念性头脑风暴：

1. 我的SO搜索建议我需要序列化queryset对象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

Answer 2

我的用例。我使用了ajax()（

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'
            })     
        );
    });
});
...

），需要用Google地图替换默认地图+更改默认地图坐标，缩放等。