谷歌地图地址表单集成发送白屏

Question

我有一个用 PHP smarty 构建的网站 + 我还添加了引导程序。问题是当我添加这个脚本来集成谷歌地图时，我得到了白屏。

如果我删除内联脚本（这里是上面的脚本）空白屏幕消失。 我还尝试从内联脚本中一一删除每个函数，但仍然出现空白屏幕。在我删除所有功能之前无法使用。

<script type="text/javascript">

 var placeSearch, autocomplete;

var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initialize() {
  autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('autocomplete')),
      { types: ['geocode'] });
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

function fillInAddress() {
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
          geolocation));
    });
  }
}
</script>

针对网页的谷歌地图模块的主要元素如下所示：

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">HERE IS THE SCRIPT ABOVE</script>
<div id="map_canvas" style="height: 100px; width=100px;"></div>
<script type="text/javascript">initialize();</script>

我的完整页面可以在这里找到http://pastebin.com/XjnZRa5i。 请帮助我，我是 javascript 的菜鸟。

编辑 2

我设法放置了自动建议的 ID，它正在工作并自动建议。但它不是自动填写表格。当我启动控制台并使用id="autocomplete" 在字段中键入国家/地区时，我在javascript 的第27 行进入控制台TypeError: document.getElementById(...) is null，这里--> document.getElementById(component).value = ''; 在函数fillInAddress() 内。 当前的 HTML 看起来像这样http://pastebin.com/nYNbt7wv。 我关注的部分是：

<div class="form">
<label class="title-submit">{'webmasterSubmitWebsite_adress'|lang}</label>
<div class="infos-submit"><input id="autocomplete" onfocus="geolocate()" type="text" class="input_text_large_submit" name="address"/></div>
</div><br>
<div class="form">
<label class="title-submit">{'webmasterSubmitWebsite_postal_code'|lang}</label>
<div class="infos-submit"><input id="postal_code" class="input_text_small" name="zipCode" disabled="true" /></div>
</div><br>
<div class="form">
<label class="title-submit">{'webmasterSubmitWebsite_city'|lang}</label>
<div class="infos-submit"><input id="locality" class="input_text_large_submit" name="city" disabled="true" /></div>
</div><br>
<div class="form">
<label class="title-submit">{'webmasterSubmitWebsite_country'|lang}</label>
<div class="infos-submit"><input id="country" class="input_text_large_submit" name="country" disabled="true" autocomplete="on" /></div>
</div><br>

Answer 1

看看这行代码：

autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),
    { types: ['geocode'] });

特别是这个表达式：

document.getElementById('autocomplete')

这是寻找id 属性为autocomplete 的元素。具体来说，它需要一个input 元素。 （顺便说一句，这个表达式不需要额外的括号。）

您的 HTML 中是否有这样的元素？

<input id="autocomplete" placeholder="Enter a city or address" />

添加后，您的自动完成功能应该会开始工作。

现在，我是怎么发现的，你自己怎么能找到这样的问题？您是否在 Chrome 或其他浏览器中使用过 JavaScript 调试器？这是找出此类错误的关键。

我在initialize()函数的开头添加了这条语句：

debugger;

然后我加载了打开 Chrome 开发者工具的页面。它停在那个语句上，然后我单步执行代码（单步执行函数调用）。当我跳过Autocomplete() 电话时，有一条Uncaught TypeError: Cannot read property 'value' of null 消息。

Autocomplete() 中出现该消息的可能原因是您将 null 值传递给了函数。所以我将这部分粘贴到 Chrome 控制台中并运行它：

document.getElementById('autocomplete')

果然，它评估为null，从那里很容易找出问题所在。

关于 Chrome 开发者工具和其他浏览器的类似工具有很多很棒的信息。我将从introduction to the Chrome DevTools 开始，尤其是关于debugging JavaScript 的部分。