Javascript 在live server上显示HTML，但在我的flask应用程序上不呈现。烧瓶上只显示索引_Javascript_Python_Html_Flask

Javascript 在live server上显示HTML，但在我的flask应用程序上不呈现。烧瓶上只显示索引

javascript python html flask

Javascript 在live server上显示HTML，但在我的flask应用程序上不呈现。烧瓶上只显示索引,javascript,python,html,flask,Javascript,Python,Html,Flask,我有一个index.html和map.html。通过flask应用程序，索引在主页上运行良好，但当我在浏览器上放置/map.html时，它会将我带到美国地图。而当我通过live server运行map.html时，它会将我带到芝加哥地图，这是我希望通过flask渲染的 # We import Flask from flask import Flask, render_template,jsonify import json from pymongo import MongoClient from

我有一个index.html和map.html。通过flask应用程序，索引在主页上运行良好，但当我在浏览器上放置/map.html时，它会将我带到美国地图。而当我通过live server运行map.html时，它会将我带到芝加哥地图，这是我希望通过flask渲染的

# We import Flask
from flask import Flask, render_template,jsonify
import json
from pymongo import MongoClient
from connections import readMongoCloud
    
# We create a Flask app
app = Flask(__name__)

# We establish a Flask route so that we can serve HTTP traffic on that route 
@app.route('/')
def home():
    # We hardcode some information to be returned
    return render_template('index.html')
# We create a route to the map.html which should show tech_hub_crime.js data 
@app.route('/map.html')
def map():
    # We hardcode some information to be returned
    return render_template('map.html')


@app.route("/readData")
def read():
    # Replace arguments with the name of your database and collection on mongodb
    db_df = readMongoCloud("ACSData","ACS2019_commute")
    return jsonify(db_df.to_dict('records'))

# Get setup so that if we call the app directly (and it isn't being imported elsewhere)
# it will then run the app with the debug mode as True
# More info - https://docs.python.org/3/library/__main__.html
if __name__ == '__main__':
    app.run(debug=True)

下面是map.html

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Tech Hub Crime</title>
    <meta content="" name="descriptison">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="../static/img/favicon.png" rel="icon">
    <link href="../static/img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap"
        rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/vendor/animate.css/animate.min.css" rel="stylesheet">
    <link href="../static/vendor/icofont/icofont.min.css" rel="stylesheet">
    <link href="../static/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="../static/vendor/venobox/venobox.css" rel="stylesheet">
    <link href="../static/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="../static/vendor/aos/aos.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="../static/css/style.css" rel="stylesheet">
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
        integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
        crossorigin="" />
    <!-- Our CSS  -->
    <link rel="stylesheet" href="../static/css/mapstyle.css" />

</head>

<body>
    <!-- ======= Header ======= -->
    <header id="header" class="fixed-top">
        <div class="container">

            <div class="logo float-left">
                <h1 class="text-light"><a href="index.html"><span>Cyberstates</span></a></h1>
                <!-- Uncomment below if you prefer to use an image logo -->
                <!-- <a href="index.html"><img src="../static/img/logo.png" alt="" class="img-fluid"></a>-->
            </div>

            <nav class="nav-menu float-right d-none d-lg-block">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    < <li><a href="blog.html">Tech Articles</a></li>
                        <li><a href="team.html">Team</a></li>
                        <li class="drop-down"><a href="">Interactive Data</a>
                            <ul>
                                <li class="active"><a href="#">Tech Hub Map Data</a></li>
                                <li><a href="#">Trending Tech Occupations</a></li>
                                <li><a href="comparison.html">Tech Hub Comparisons</a></li>
                            </ul>
                        </li>
                </ul>
            </nav><!-- .nav-menu -->
        </div>
    </header><!-- End Header -->

    <!-- Map -->
    <div id="map"></div>


    <!-- <div id="chicago-map"></div>
  <div id="nyc-map"></div>
  <div id="sf-map"></div>
  <div id="austin-map"></div> -->



    <!-- ======= Footer ======= -->
    <footer id="footer" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">

        <div class="footer-newsletter">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <h4>Our Newsletter</h4>
                        <p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
                    </div>
                    <div class="col-lg-6">
                        <form action="" method="post">
                            <input type="email" name="email"><input type="submit" value="Subscribe">
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-top">
            <div class="container">
                <div class="row">

                    <div class="col-lg-3 col-md-6 footer-links">
                        <h4>Useful Links</h4>
                        <ul>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Home</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">About us</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Services</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Terms of service</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Privacy policy</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-3 col-md-6 footer-links">
                        <h4>Our Services</h4>
                        <ul>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Web Design</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Web Development</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Product Management</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Marketing</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Graphic Design</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-3 col-md-6 footer-contact">
                        <h4>Contact Us</h4>
                        <p>
                            A108 Adam Street <br>
                            New York, NY 535022<br>
                            United States <br><br>
                            <strong>Phone:</strong> +1 5589 55488 55<br>
                            <strong>Email:</strong> info@example.com<br>
                        </p>

                    </div>

                    <div class="col-lg-3 col-md-6 footer-info">
                        <h3>About Moderna</h3>
                        <p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita
                            valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
                        <div class="social-links mt-3">
                            <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
                            <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
                            <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
                            <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
                        </div>
                    </div>

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

        <div class="container">
            <div class="copyright">
                &copy; Copyright <strong><span>Moderna</span></strong>. All Rights Reserved
            </div>
            <div class="credits">
                <!-- All the links in the footer should remain intact. -->
                <!-- You can delete the links only if you purchased the pro version. -->
                <!-- Licensing information: https://bootstrapmade.com/license/ -->
                <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/ -->
                Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
            </div>
        </div>
    </footer><!-- End Footer -->

    <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

    <!-- API key -->
    <script type="text/javascript" src="../static/js/config.js"></script>
    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
        integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
        crossorigin=""></script>
    <!-- D3 CDN -->
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <!-- JS -->
    <script type="text/javascript" src="../static/js/tech_hub_crime.js"></script>

    <!-- Leaflet-Choropleth JavaScript -->
    <script type="text/javascript" src="../static/js/choropleth.js"></script>

    <!-- Vendor JS Files -->
    <script src="../static/vendor/jquery/jquery.min.js"></script>
    <script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../static/vendor/jquery.easing/jquery.easing.min.js"></script>
    <script src="../static/vendor/php-email-form/validate.js"></script>
    <script src="../static/vendor/venobox/venobox.min.js"></script>
    <script src="../static/vendor/waypoints/jquery.waypoints.min.js"></script>
    <script src="../static/vendor/counterup/counterup.min.js"></script>
    <script src="../static/vendor/owl.carousel/owl.carousel.min.js"></script>
    <script src="../static/vendor/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="../static/vendor/aos/aos.js"></script>

    <!-- Template Main JS File -->
    <script src="../static/js/main.js"></script>

</body>

</html>


技术中心犯罪


<









我们的通讯
我们需要一个巨大的未来
有用的链接







我们的服务







联系我们

亚当街A108号

纽约州纽约市535022

美国


电话：+1 5589 55488 55

电子邮件：info@example.com


关于摩德纳
< >我们的土地是巨大的
valies darta donna mare酵母菌iaculis eu非diam phasellus
&抄袭；版权所有Moderna。版权所有
设计人

下面是我想通过map.html呈现的JS文件

function crime_map(coordinates) {
  var map = L.map("map", {
    center: coordinates,
    zoom: 13

  });
  // Adding tile layer
  L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
    attribution: "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>",
    tileSize: 512,
    maxZoom: 20,
    zoomOffset: -1,
    id: "mapbox/streets-v11",
    accessToken: API_KEY
  }).addTo(map);
  return map
};

coordinates = {
  "nyc": [40.730610, -73.935242],
  "austin": [30.2672, -97.7431],
  "san francisco": [37.7749, -122.4194],
  "chicago": [41.8781, -87.6298]
}

url = {
  "nyc": ["https://data.cityofnewyork.us/resource/qgea-i56i.json"],
  "austin": ["https://data.austintexas.gov/resource/fdj4-gpfu.json"],
  "san francisco": ["https://data.sfgov.org/resource/cuks-n6tp.json?"],
  "chicago": ["https://data.cityofchicago.org/resource/dfnk-7re6.json"]
}


// nyc crime function 
function nyc_markers(url, map) {
  d3.json(url, function (response) {
    for (var i = 0; i < response.length; i++) {
      var location = response[i];
      if (location.lat_lon) {
        L.marker([location.latitude, location.longitude]).addTo(map);
      }
    }
  })
}


// // chicago crime function 

function chi_markers(url, map) {
  d3.json(url, function (response) {
    for (var i = 0; i < response.length; i++) {
      var location = response[i];
      if (location.location) {
        L.marker([location.latitude, location.longitude]).addTo(map);
      }
    }
  })
}

// san fran crime function 

function sanfran_markers(url, map) {
  d3.json(url, function (response) {
    for (var i = 0; i < response.length; i++) {
      var location = response[i].location;
      if (location) {
        L.marker([location.coordinates[1], location.coordinates[0]]).addTo(map);
      }
    }
  })
}

//  austin crime function 

function austin_markers(url, map) {
  d3.json(url, function (response) {
    for (var i = 0; i < response.length; i++) {
      var location = response[i].location;
      if (location) {
        L.marker([location.latitude, location.longitude]).addTo(map);
      }
    }
  })
}

// // atlanta crime function

// var csv_atl = ("../Resources/Atlanta_Crime.csv")
// function atlanta_markers(csv_atl, map) {
//   d3.csv(csv_atl, function (response) {
//     for (var i = 0; i < response.length; i++) {
//       var location = response[i].location;
//       if (location) {
//         L.marker([location.latitude, location.longitude]).addTo(map);
//       }
//     }
//   })
// }

//function map calls

var map = crime_map(coordinates["chicago"])
chi_markers(url["chicago"], map)
// nyc_markers(url["nyc"], map)
// sanfran_markers(url["san francisco"], map)
// austin_markers(url["austin"], map)

功能犯罪图（坐标）{
var map=L.map（“map”{
中心：坐标，
缩放：13
});
//添加瓷砖层
L.Tillelayer（“https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌={accessToken}“{
归属：“）”，
tileSize:512，
maxZoom:20，
Zoomofset:-1，
id:“地图盒/街道-v11”，
accessToken:API_密钥
}).addTo（地图）；
返回图
};
坐标={
“纽约市”：[40.730610，-73.935242]，
“奥斯汀”：[30.2672，-97.7431]，
“旧金山”：[37.7749，-122.4194]，
“芝加哥”：[41.8781，-87.6298]
}
url={
“纽约”：[”https://data.cityofnewyork.us/resource/qgea-i56i.json"],
“奥斯汀”：https://data.austintexas.gov/resource/fdj4-gpfu.json"],
“旧金山”：[”https://data.sfgov.org/resource/cuks-n6tp.json?"],
“芝加哥”：[”https://data.cityofchicago.org/resource/dfnk-7re6.json"]
}
//纽约市犯罪职能
功能nyc_标记（url、地图）{
d3.json（url、函数（响应）{
对于（变量i=0；i@app.route('/map.html')
def map():
    # We hardcode some information to be returned
    return render_template('map.html')