Question

我在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）

Answer 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>

通过Jinja2将Google Map API标记从Python传递到Javascript

1 个答案: