0

我在 GSQL 数据库中有一个我希望发送到 javascript 的标记列表，以便它们可以显示在谷歌地图上。实际上，我传递了一个 python 列表，它看起来像：

[[50.1142, .12231, "MarkerName"], [49.131, -.12232, "MarkerName2"], [48.131, -.12232, "MarkerName3"]]

通过 jinja2 模板，作为变量“maplist”。

我的 javascript 在模板上看起来像这样：

<script type="text/javascript">
        $(document).ready(function () {
                          var latitude = parseFloat("51.515252");
                          var longitude = parseFloat("-0.189852");
                          var latlngPos = new google.maps.LatLng(latitude, longitude);
                          // Set up options for the Google map
                          var myOptions = {
                          zoom: 10,
                          center: latlngPos,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                          };
                          // Define the map
                          map = new google.maps.Map(document.getElementById("map"), myOptions);

                          });

    function addMarker(lat, lng, name){
            var point = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({position: point,
                                                map: map,
                                                title: name
                                                });

                            };

        </script>

我像这样遍历列表：

    {% for marker in maplist %}
    <script type="text/javascript">
    addMarker(parseFloat('{{marker.1}}'),parseFloat('{{marker.2}}'),'{{marker.0}}');
    </script>
    {% endfor %}

但是，地图上没有显示任何标记。我完全不相信我的方法是最好的，但我在这里看到了它：Parsing dictionary from GAE python to create marker objects in javascript / GMaps api，这对我来说很有意义。也许 JSON 是一种更好的方法，在这种情况下，我将非常感谢任何突出的例子（基本上是一个完全的 Javscript-neophyte）

4

1 回答 1

1

您正在尝试使用对象表示法访问列表索引。最好创建一个 JSON 对象数组：

[{'lat': 123.3, 'lng': 234.5, 'name': "Foo"}]

然后在您的模板中：

{{marker.lat}}
{{marker.lng}}

此外，为每个数据点创建一个新的脚本标签似乎过于复杂。为什么不在主脚本标签中创建一些变量来访问所有数据。像这样：

<script type="text/javascript">
    var data = {{data}}
    $(document).ready(function () {
                      var latitude = parseFloat("51.515252");
                      var longitude = parseFloat("-0.189852");
                      var latlngPos = new google.maps.LatLng(latitude, longitude);
                      // Set up options for the Google map
                      var myOptions = {
                      zoom: 10,
                      center: latlngPos,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                      };
                      // Define the map
                      map = new google.maps.Map(document.getElementById("map"), myOptions);
                      data.forEach(function(p) {
                          var point = new google.maps.LatLng(p.lat, p.lng);
                          var marker = new google.maps.Marker({position: point,
                                            map: map,
                                            title: p.name
                                            });

                             })
                      });


    </script>
于 2013-04-29T15:50:22.807 回答