我有一个index.html和map.html。通过flask应用程序，索引在主页上运行得很好，但当我把/map.html放在浏览器上时，它会把我带到美国地图。而当我通过实时服务器运行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)
下面是地图.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">
© 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>
下面是我想通过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)
这是因为您同时使用home和map路由呈现同一个HTML页面。以下是需要更正的内容：
@app.route('/map.html')
def map():
# We hardcode some information to be returned
return render_template('map.html')