2017-08-15 113 views
0

我想显示一个瓶颈网页中的叶片地图,该网页由包含2个引导程序选择和提交按钮的表单组成。表单元素在地图加载之前工作正常。但是当地图加载时,选择不可点击。bootsrap选择不使用叶片图

这是我的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> 

我该如何解决这个问题?

回答

0

它工作时,我用HTML文件内的iframe来显示地图。