Question

我试图在一个烧瓶网页中显示一个folium地图，该网页包含一个包含2个引导选择和一个提交按钮的表单。表单元素在加载地图之前工作正常。但是当加载地图时，选择不可点击。

这是我的python脚本

from flask import Flask, render_template, request
import folium

app = Flask(__name__)
@app.route("/home") 
def home():
    return render_template("home.html")

@app.route("/result", methods =['POST'])
def result():
    map = folium.Map(location=[53.3975054,-10.1987964], zoom_start =9, tiles ='Stamen Terrain')
    map.save(outfile='templates/countries.html')
    return render_template("result.html")

if __name__=="__main__":
    app.run(debug = True)

home.html的

<!DOCTYPE html>
<html>
<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-responsive.min.css')}}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css')}}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css')}}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/sl-slide.css')}}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">



</head>
<body>

<section id="about-us" class="container main">
        <div class="row-fluid">
            <div class="span8" >
                <div class="blog">

                  <div class="blog-item well">
                    <a href="#"><h2>Heading2</h2></a>
                    <form action="{{ url_for('home') }}" method="POST">
                      <div class="form-group">
                    <select class="selectpicker" name="select_country" data-live-search="true" data-style="btn-primary">
                    <option >Country1</option>
                    <option >Country2</option>
                    </select>

                    <select class="selectpicker" name="select_event" data-live-search="true" data-style="btn-primary">
                      <option >Event1</option>
<option >Event1</option>
                    </select>

                    <input type="submit" class="btn btn-info" value="Submit Button">
                  </div>
                </form>

                    </div>

        </div>
    </div>
</div>
</section>

{%block content%}
{%endblock%}
</body>
</html>

result.html

{%extends "home.html"%}
<div>
{%block content%}
{%include "countries.html"%}
{%endblock%}
</div>

我该如何解决这个问题？

Answer 1

当我在html文件中使用iframe来显示地图时，它有效。

bootsrap选择不使用folium map

1 个答案: