Question

，同时运行烧瓶服务器引发此错误未捕获的类型错误：不能在对象中读出空的属性“则firstChild” ._ OG（JS键= AIzaSyAbZKo3h1LVhyoURgxcSUG9BGVvZtZpg0U：88）在新SG（JS键= AIzaSyAbZKo3h1LVhyoURgxcSUG9BGVvZtZpg0U：89）<无线电通信/> 我是Python-Flask.google地图中的新谷歌地图在运行Flask localhost服务器时没有显示。但是，它在运行模板时显示。我不知道我在源代码中的错误。我只需要在空位之间显示地图。这是仪表板where place be the map here

昨天我张贴的答案是working.but它显示像遗漏的类型错误：无法读取的对象._空的特性“则firstChild” OG（JS键= AIzaSyAbZKo3h1LVhyoURgxcSUG9BGVvZtZpg0U：88）？在新的SG（JS键= AIzaSyAbZKo3h1LVhyoURgxcSUG9BGVvZtZpg0U ：89）问题出在哪里

以下是谷歌地图代码：

{% extends "base.html" %}
{% block head %}
{{super()}}
{% endblock %}

{% block navbar %}
{{super()}}
{% endblock %}


{% block content %}

<div class="row">
 <ol class="breadcrumb">
    <li><a href="#">
        <em class="fa fa-home"></em>
    </a></li>
    <li class="active">Locations>create locations</li>
  </ol>
 </div><!--/.row-->
<div class="row">
<div class="col-md-6">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDv8X0eEAWUtWZrHG_1XLB8gMNxgdcD0-U"></script>
<script >
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(17.3850, 78.4867),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow()
        var name;
        var lat;
        var lng;
        var latlngbounds = new google.maps.LatLngBounds();

        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        google.maps.event.addListener(map, 'click', function (e) {
            var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
            var geocoder = geocoder = new google.maps.Geocoder();
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'Hello World!'
        });

            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {

                    name= results[1].formatted_address;
                    lat=e.latLng.lat();
                    lng=e.latLng.lng();
                        alert("Location: " +name + "\r\nLatitude: " + lat + "\r\nLongitude: " +lng );
                   document.getElementById("loc").value=name;
                    document.getElementById("lat").value=lat;
                     document.getElementById("lng").value=lng;

                    }
                }

            });
        });
    }
</script>
<!--<div id="dvMap" style="width: 50%; height: 50%">-->
<!--</div>-->
<form   role="form" action="/post/locations" method="post"  >
<input type="text" id="loc" name="name" class="form-control"/>
<input type="text" name="latitude" id="lat" class="form-control"/>
<input name="longitude" id="lng" type="text" class="form-control"/>
<input type="submit" class="btn btn-primary" value="Submit">
                                        <input type="reset" class="btn btn-default" value="Reset">

</form>

</div>

</div>
<div id="dvMap" style="width: 80%; height: 70%   ">
</div>
{% endblock %}

这是Python代码：

@app.route('/page/locations')
  def location():
  if session['username']:
      return render_template('map.html',user=session['username'])

  else:
    print ('login first!')
    return redirect('/dashboard')

Answer 1

我刚刚找到答案。这是我的答案。

{% extends "base.html" %}
{% block head %}
{{super()}}
{% endblock %}

{% block navbar %}
{{super()}}
{% endblock %}


{% block content %}



<div class="row">
<ol class="breadcrumb">
    <li><a href="#">
        <em class="fa fa-home"></em>
    </a></li>
    <li class="active">Locations>Create Locations</li>
 </ol>
 </div><!--/.row  id="entry.id" id="uploadbanner"-->


 <div id="dvMap" style="width: 100%; height: 100%">
 </div>

<form role="form" action="/post/locations" method="post">
<label>Name:</label>
<input type="text" id="loc" name="name"/>
<label>Latitude:</label>
<input type="text" name="latitude" id="lat"/>
<label>Longitude:</label>
<input name="longitude" id="lng" type="text"/>
<input type="submit" class="btn btn-primary" value=" Submit ">
<input type="reset" class="btn btn-default" value="Reset">

</form>

{% endblock %}

我只是在Javascript文件夹中添加脚本。

as like＆lt; - static / assets / js / map.js - ＆gt;在我的模板base.html源代码中。

Answer 2

您的代码的问题是在创建div元素（id =“dvMap”之一）之前执行javascript代码段。所以要么将javascript片段放在div元素之后，如下所示，

{% extends "base.html" %}
{% block head %}
{{super()}}
{% endblock %}

{% block navbar %}
{{super()}}
{% endblock %}


{% block content %}

<div class="row">
 <ol class="breadcrumb">
    <li><a href="#">
        <em class="fa fa-home"></em>
    </a></li>
    <li class="active">Locations>create locations</li>
  </ol>
 </div>{# /.row  #}
<div class="row">
<div class="col-md-6">

{# <div id="dvMap" style="width: 50%; height: 50%"></div> #}
<form   role="form" action="/post/locations" method="post"  >
<input type="text" id="loc" name="name" class="form-control"/>
<input type="text" name="latitude" id="lat" class="form-control"/>
<input name="longitude" id="lng" type="text" class="form-control"/>
<input type="submit" class="btn btn-primary" value="Submit">
                                        <input type="reset" class="btn btn-default" value="Reset">

</form>

</div>

</div>
<div id="dvMap" style="width: 80%; height: 70%   ">
</div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDv8X0eEAWUtWZrHG_1XLB8gMNxgdcD0-U"></script>
    <script >
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(17.3850, 78.4867),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow()
            var name;
            var lat;
            var lng;
            var latlngbounds = new google.maps.LatLngBounds();

            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            google.maps.event.addListener(map, 'click', function (e) {
                var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
                var geocoder = geocoder = new google.maps.Geocoder();
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: 'Hello World!'
            });

                geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[1]) {

                        name= results[1].formatted_address;
                        lat=e.latLng.lat();
                        lng=e.latLng.lng();
                            alert("Location: " +name + "\r\nLatitude: " + lat + "\r\nLongitude: " +lng );
                       document.getElementById("loc").value=name;
                        document.getElementById("lat").value=lat;
                         document.getElementById("lng").value=lng;

                        }
                    }

                });
            });
        }
    </script>
{% endblock %}

或者在静态文件夹中创建一个单独的js文件（这里我将其命名为custom.js），其中包含javascript代码，并在文件末尾添加<script src='{{ url_for('static', filename='custom.js') }}'></script>。

我希望这会对你有所帮助。

PS： - 请在jinja2模板文件中注释时使用jinja2评论标签。您可以参考here。

如何在仪表板之间显示谷歌地图

2 个答案: