2017-07-28 7 views
1

私はGoogle App Engineを使ってWebページにGoogleマップを表示しています。Python変数の値をHTMLのJavaScriptに送る方法

私はデータベースに緯度と経度を持ち込み、地図上に表示したいと考えています。これを行うには、インポートされた緯度と経度をHTML形式のJavaScriptに渡す必要があります。私はいくつかの方法を試みましたが、それは役に立たないです。 (例:{{variable}}は役に立たない)

これをデバッグしたり、これを進めるにはどうすればよいですか?

class Map(webapp2.RequestHandler): 

    db = connect_to_cloudsql() 
    cursor = db.cursor() 
    cursor.execute("""select latitude,longitude from User;""") 

    data=cursor.fetchone() 
    lat=data[0] 
    lng=data[1] 

    formstring = """ 
    <!DOCTYPE html> 
    <html lang="ko-KR"> 
    <head> 
    <meta charset="utf-8"/> 
     <meta name="google-site-verification" content="9EqLgIzCmwFo7XAcSe4sBNZ_t0gULadyeF9BCO0DY3k"/> 
    </head> 
    <body class> 
    <style> 
    #map { 
     width: 80%; 
     height: 400px; 
     background-color: grey; 
     } 
    </style> 
    <div style="position:relative;width:1080px;margin:0 auto;z-index:11"> 
    <div class="container" role="main"> 
    <div id="map"></div> 
    <br><br> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap"> 
    </script> 
    <script> 
     function initMap() { 

     var uluru = {lat: {lat} , lng: {lng} }; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: uluru 
     }); 
     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map 
     }); 
     } 
    </script> 

    </div> 
    </div> 
    </body> 
    </html> 
     """ 
+0

あなたのHTMLコードの作成方法は悪いですが、そうであれば、HTMLコード文字列を壊してlat-lng値を文字列に追加し、HTMLコードを作成してください。 –

+1

PythonファイルにHTMLを書き込まないでください。 GAEはJinja2をサポートしています。使用する必要があります。 –

+1

このように文字列を作成することを依頼している場合は、{{}を '{lat} 'と{' lng'}以外の '{{'と '}' – zwer

答えて

0

string formattersをご覧ください。あなたのWebアプリケーションが成長するにつれて、より堅牢であるため、おそらくテンプレートの使用に切り替えることになります。 Webapp2 provides supportJinja2 templates)は、広く使用されており、長期的にはあなたの人生を楽にします。

しかし、短期的には、使用する文字列フォーマッタ:また

formstring = """ 
<!DOCTYPE html> 
... 

    var uluru = {lat: %f , lng: %f }; 
    var map = new google.maps.Map(document.getElementById('map'), { 
... 
""" % (lat, lng) # assuming lat/lng are floats, use %s instead of %f for strings 

は、 "新しい道" を使用します。もう一度

formstring = """<html.......{lat: {:f}, lng: {:f}...""".format(lat, lng) 

を、string formattersを見てください。

関連する問題