0

Googleマップに表示できるように、JavaScriptに送信したいマーカーのGSQLデータベースにリストがあります。実際には、次のような python リストを渡します。

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

変数「maplist」として、jinja2 テンプレートを介して。

私の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 %}

ただし、どのマーカーもマップに表示されません。私のアプローチが最善であるとはまったく確信が持てませんが、ここでそれが行われるのを見たことがあります: GAE python から辞書を解析して javascript / GMaps api でマーカー オブジェクトを作成する、そしてそれは私にとって理にかなっています。おそらくJSONの方が優れたアプローチです。その場合、顕著な例があれば非常にありがたいです(基本的に完全なJavascript初心者です)。

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 に答える