Google Maps地址表单集成发送白屏

Question

我有一个用PHP smarty构建的网站+我还添加了bootstrap。 问题是，当我添加此脚本来集成Google地图时，会出现白屏。

如果我删除了内联脚本（“上面是脚本”），黑屏消失了。 我还尝试从内联脚本中逐个删除每个功能，但仍然出现空白屏幕。 直到我删除了所有功能，它才起作用。

<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>

针对网页的google maps模块的主要元素如下所示：

<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"字段中输入国家/地区时，在控制台中出现TypeError: document.getElementById(...) is null在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消息的Uncaught TypeError: Cannot read property 'value' of null 。

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

document.getElementById('autocomplete')

当然，它求值为null ，从那里很容易找出问题所在。

Chrome开发人员工具和其他浏览器的类似工具上有很多不错的信息。 我将从Chrome DevTools的介绍开始，尤其是关于调试JavaScript的这一部分。