传递Googlemap API V. 3通过Jinja2从Python到Javascript的标记

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>