我正在创建一个flask应用程序，将学生与学校联系起来，我希望学生能够在网站上查看地图，并看到我数据库中的所有学校。 我已经用Python创建了网站并运行了服务器和数据库。 顺便说一句，请忽略不相关的代码，我不确定什么是需要的，什么是不需要的。

以下是我的回家路由代码:

@main.route("/home/student", methods=['GET', 'POST'])
def home():

if current_user.is_anonymous:
    return redirect(url_for('main.home_ams'))
if current_user.is_authenticated:
    if current_user.account_type == "Teacher":
        return redirect(url_for('main.home_teacher'))
    if current_user.account_type == "Admin":
        return redirect(url_for('main.home_admin'))
    if session["location"] == "LOC":
        return redirect(url_for('main.home_w_loc'))

form = LocationForm()
page = request.args.get('page', 1, type=int)
posts = Post.query.order_by(Post.school_title.desc()).paginate(page=page, per_page=5)
posts_dis = Post.query.all()   
location = session["location"]

for post in posts_dis:
    api_key = "myapi"
    url1 = "https://maps.googleapis.com/maps/api/distancematrix/json?origins="
    url2 = "&destinations="
    url3 = "&mode=car&key="

    origin = location
    school = post.school_location_p

    origin_up = origin.replace(' ', '+')
    school_up = school.replace(' ', '+')

    url_full = url1+origin_up+url2+school_up+url3+api_key

    output = requests.get(url_full).json()
    for obj in output['rows']:
        for data in obj['elements']:
            x =  data['distance']['value']
            y = x /1000
            post.distance = round(y)
            
    if post.distance != "X":
        posts = Post.query.order_by(Post.distance.asc()).paginate(page=page, per_page=5)
    else:
        posts = Post.query.order_by(Post.school_title.desc()).paginate(page=page, per_page=5) 

return render_template('home.html', posts=posts, form=form)

这是我的html页面，上面有地图:

    <article class="media content-section-map">
      <div id='printoutPanel'></div>
      <div id='myMap'></div>
      {%for post in posts.items %}
        <script>
              var locName = []
              for (let i = 0; i < posts.items.length; i++) {
                  locName[i] = "{{post.school_location_p }}";
                }
        </script>
      {%endfor%}
      <script type='text/javascript'>
          function GetMap() {
              var map = new Microsoft.Maps.Map('#myMap', {
                  credentials: 'my-api-key',
              });
              for (let i = 0; i < locName.length; i++) {
                  Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                      var searchManager = new Microsoft.Maps.Search.SearchManager(map);
                      var requestOptions = {
                          bounds: map.getBounds(),
                          where: locName[i],
                          callback: function (answer, userData) {
                              map.setView({ bounds: answer.results[0].bestView });
  
                              var pin = new Microsoft.Maps.Pushpin(answer.results[0].location, {
                                  color: 'red'
                              });
  
                              Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
                                  e.target.setOptions({ color: 'blue' });
                              });
  
                              Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) {
                                  e.target.setOptions({ color: 'red' });
                              });
                              map.entities.push(pin);
                          }
                      };
                      searchManager.geocode(requestOptions);
                  });
              }
          }
      </script>
      <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    </article>

正如您所知，我试图使用JavaScript做一些工作，但没有成功。

顺晟科技：