配置CS50库以使用SQLite数据库

Question

我不知道为什么geomap没有出现在我的map.html页面中。多年来一直坚持这一点。将非常感谢帮助。我正在尝试根据我在当前用户上使用phpliteadmin创建的数据库中的数据创建geomap。你可以忽略所有的HTML代码，除了脚本部分是问题。我在脚本中缺少什么？谢谢你的帮助。

配置CS50库以使用SQLite数据库

...irrelevant code
db = SQL("sqlite:///myTravel.db")

@app.route("/")
@login_required
def map():
    """Render map."""
    user = db.execute("SELECT id FROM 'users' WHERE id = :id", id = session['user_id'])
    return render_template("map.html", user_id = user[0]['id'])
............... irrelevant code












<!DOCTYPE html>

<html lang="en">

    <head>

        <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
        <meta charset="utf-8"/>
        <meta content="initial-scale=1, width=device-width" name="viewport"/>

        <!-- documentation at http://getbootstrap.com/, alternative themes at https://www.bootstrapcdn.com/bootswatch/ -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

        <link href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet"/>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function ($)
            {
              var dataTable = new google.visualization.DataTable();
              dataTable.addColumn('string', 'Country');
              dataTable.addColumn('integer', 'Is Home');
              var user_id = {{user_id}};

              $.getJSON("fetchUsers.php", function(data)
              {
                $.each(data.result, function(){
                    if(this['id'] == user_id)
                    {
                      dataTable.addRows([this['home_country'], 1])
                    }
                  });
              });

              $.getJSON("fetchCountriesPortfolio.php", function(data)
              {
                $.each(data.result, function(){
                    if(this['user_id'] == user_id)
                    {
                      dataTable.addRows([this['country'], 0])
                    }
                  });
              });

              google.charts.load('current', {
                    'packages':['geomap'],
                    // Note: you will need to get a mapsApiKey for your project.
                    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
                    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
              });
              google.charts.setOnLoadCallback(drawMap(dataTable));
            });

            function drawMap(dataTable)
            {
              var options = {};
              options['dataMode'] = 'regions';
              options['region'] = 'world';
              option['colors'] = [yellow, blue]

              var container = document.getElementById('regions_div');
              var geomap = new google.visualization.GeoMap(container);

              geomap.draw(dataTable, options);
            }
        </script>
        <title>myTravel: Map</title>

    </head>

    <body>
            ..........irrelevant code
            <main>
                <div id="regions_div" style="width: 900px; height: 500px;"></div>
            </main>

        </div>

    </body>

</html>

Geomap没有出现在html中

配置CS50库以使用SQLite数据库

0 个答案: