-1

我不确定这是由于我使用的树枝模板还是其他原因，可能是 Jquery 或 css。但我只是在关注如何从这个官方教程中嵌入简单的谷歌地图。

当我将代码放在单独的 html 文件中时，我得到了地图的显示和工作，就像一个魅力。然而，当我将它包含在我的树枝模板中时，地图就消失了。有时我让地图的 div 显示得非常快，然后立即消失。

我只是试图在该 div 中输入一个文本“这是地图”，这样我就可以观察并确保它的状态（消失或显示），但我仍然让它消失了（文本没有显示）。

当我评论这一行时

// google.maps.event.addDomListener(window, 'load', initialize);

我得到了显示的 div（当然还有文本），但肯定没有加载地图。基本上我不是前端开发人员，所以我不知道它是怎么回事。

这是我的页面。

{% extends 'YastafeedContentBundle::base_regform.html.twig' %}

{% block content1 %}
<div id="page-title">
  <span class="title">{% block page_title %} Kajian Baru {% endblock %}</span>
  <span class="subtitle">{% block page_subtitle %} Agendakan kajian baru {% endblock %}</span>
</div>
<!-- ENDS title -->
<!-- column (left)-->
<div class="one-column">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">

  {% block stylesheets %}
  <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
  </style>
  <link href="/bundles/nova/css/tokeninput/token-input-facebook.css" rel="stylesheet" />
  {{ form_stylesheet(descForm) }}
  {{ form_stylesheet(jadwalForm) }}
  {{ form_stylesheet(lokasiForm) }}
  {{ form_stylesheet(posterForm) }}
  {% endblock %}

  {% block javascripts %}
  <!-- page-content -->
  <!-- form -->
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script type="text/javascript" src="/bundles/nova/js/jquery.form.min.js"></script>
  <script type="text/javascript" src="/bundles/nova/js/form-validation.js"></script>
  <script type="text/javascript" src="/bundles/nova/js/tokeninput/jquery.tokeninput.js"></script>
  {{ form_javascript(descForm) }}
  {{ form_javascript(jadwalForm) }}
  {{ form_javascript(posterForm) }}
  <script>
  var map;
  function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  {% endblock %}

  <form id="kajianForm" class="contact-form" action="{{ path('kajian_create') }}" method="post">
    <p class="header">Deskripsi Umum</p>
    {{ form_widget(descForm) }}
  </form>

    <div class="agm_google_maps" id="map-70b9d4ed8dc157a52a5b8949e219c8e3"></div>
  <form id="lokasiForm" class="contact-form" action="{{ path('lokasi_create') }}" method="post">
    <p class="header">Lokasi</p>
    {{ form_widget(lokasiForm) }}
  </form>
    <div id="map_canvas">this is the map</div>
</div>

<div class="one-column">
  <form id="posterForm" class="contact-form" action="{{ path('gambar_create') }}" method="post" enctype="multipart/form-data">
    <p class="header">Gambar Fitur</p>
    {{ form_widget(descForm) }}
    {{ form_widget(posterForm) }}
    <input type="submit" value="Upload File to Server" />
  </form>
  <div class="progress">
    <div class="bar"></div >
      <div class="percent">0%</div >

  </div>

  <div id="status"></div>

  <form id="jadwalForm" class="contact-form" action="{{ path('jadwal_create') }}"  method="post">
    <p class="header">Jadwal</p>
    {{ form_widget(jadwalForm) }}
    <button type="button" name="add" id="add" tabindex="5" value="ADD">TAMBAH</button>
  </form>

  <div id="list-check" class="lists-check">
    <ul id="scheduleList">  
    </ul>
  </div>

</div>

{% endblock %}

{% block content2 %}
<div class="one-column"> 
  <p id="success" class="success"></p>
  <a href="#" name="back" id="back" tabindex="5" class="link-button" style="float:left;"><span>Back to the list</span></a>
</div>
<div class="one-column">  
  <a href="#" name="create" id="submit" tabindex="5" class="link-button" style="float:right;"><span>Tentukan Lokasi →&lt;/span></a>
</div>
{% endblock %}

我试图将 div 移动到页面上的不同位置，但它仍然不断消失。我需要一个提示，谢谢。

4

1 回答 1

1

样式表中使用的选择器：

#map-canvas { height: 100% }
----^

与地图容器的 id 不匹配：

<div id="map_canvas">this is the map</div>
------------^
于 2013-10-27T00:02:39.597 回答