傳遞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>