Question

我在使用Goggle Maps API时遇到了问题。我无法显示地图。下面是我的代码，我在外部设计了宽度和高度的地图div。有什么建议？我对编码相对较新，对StacOverflow也是如此，如果我不遵守礼仪，我会道歉！

{% extends "base.html" %}

    {% block title %}Profile{% endblock %}

    {% block footer %}
    <script>
      function initMap()
      {
        var options = {
          zoom: 8,
          center {lat: -25.363, lng: 131.044};
        }

      var map = new google.maps.Map(document.getElementById('map'), options);
      }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbzIlcsHTVt1OqDwlLIoVXFEwphLqWQjk&callback=initMap"
      async defer></script>

    {% endblock %}

    {% block body %}

        <h1>Profile</h1>

        <div id="map"></div>

        <dl class="dl-horizontal">
            <dt>First name</dt>
            <dd>{{ user.firstName }}</dd>

            <dt>Last Name</dt>
            <dd>{{ user.lastName }}</dd>

            <dt>Latitude</dt>
            <dd>{{ user.lat }}</dd>

            <dt>Longitude</dt>
            <dd>{{ user.lng }}</dd>

            <dt>email</dt>
            <dd>{{ user.email }}</dd>
        </dl>

        <a href="/profile/edit">Edit</a>

    {% endblock %}

Answer 1

您的代码中有2个小问题

脚本中选项变量中的拼写错误。缺少冒号和额外的分号。
缺少CSS样式。（如果您已在base.html中使用此功能，则可能需要关闭额外的样式标记）

以下是修复问题后的代码。把它放在HTML文件中它应该可以工作。

{% extends "base.html" %}
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    {% block title %}Profile{% endblock %}

    {% block footer %}


    {% endblock %}

    {% block body %}

        <h1>Profile</h1>

        <div id="map"></div>
    <script>
      function initMap()
      {
        var options = {
          zoom: 8,
          center: {lat: -25.363, lng: 131.044}
        }

      var map = new google.maps.Map(document.getElementById('map'), options);
      }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbzIlcsHTVt1OqDwlLIoVXFEwphLqWQjk&callback=initMap"
      async defer></script>
        <dl class="dl-horizontal">
            <dt>First name</dt>
            <dd>{{ user.firstName }}</dd>

            <dt>Last Name</dt>
            <dd>{{ user.lastName }}</dd>

            <dt>Latitude</dt>
            <dd>{{ user.lat }}</dd>

            <dt>Longitude</dt>
            <dd>{{ user.lng }}</dd>

            <dt>email</dt>
            <dd>{{ user.email }}</dd>
        </dl>

        <a href="/profile/edit">Edit</a>

    {% endblock %}

无法使用Google Maps JavaScript API来显示地图

1 个答案: