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

我有一个在PHP smarty+中构建的网站，我还添加了bootstrap。问题是，当我添加这个集成谷歌地图的脚本时，我会看到白色屏幕

如果我删除内联脚本（这里是上面的脚本），空白屏幕将消失。 我还试着从内联脚本中一个接一个地删除每个函数，但仍然得到了一个空白屏幕。直到我删除了所有函数才起作用

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

---

请看这行代码：

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

特别是这句话：

document.getElementById('autocomplete')

正在查找其

id

属性为

autocomplete

的元素。具体来说，它需要一个

输入

元素。（顺便说一句，这个表达式周围不需要额外的括号。）

在HTML中有这样的元素吗

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

然后我加载了打开Chrome开发者工具的页面。它在该语句上停止，然后我逐步完成代码（逐步完成函数调用）。出现

未捕获类型错误：当我跨过
Autocomplete（）
调用时，无法读取null

消息的属性“value”

Autocomplete（）

中出现该消息的可能原因是您向函数传递了一个

null

值。因此，我将此部分粘贴到Chrome控制台并运行它：

document.getElementById('autocomplete')

果不其然，它的计算结果为

null

，从那里很容易找出问题所在

---

关于Chrome开发者工具和其他浏览器的类似工具，有很多很好的信息。我将从这一部分开始，特别是这一部分。

嘿，谢谢你的回答，这是因为我使用smarty php，我需要将代码包装在{literal}{/literal}标记中。但我也会尝试你的想法，因为地图现在是空白的。很乐意帮助。我没有看到任何初始化地图的代码，所以我希望地图是空白的。好吧，我想我没有理解这个概念，我还希望谷歌地图会自动指向自动建议和相反的地址（当用户将地址固定在地图上自动写入字段时）。有这方面的文档吗？嘿，Micheal，你能告诉我为什么我得到NUll值吗。请检查编辑2。我在这里实现了它。我错在哪里了？使用JavaScript调试器。打开Chrome控制台并转到Sources选项卡。找到右侧的灰色“带竖条的停车标志”图标。当你将鼠标悬停在它上面时，它会说“暂停处理异常”。单击该图标将其变为蓝色。现在，JavaScript调试器将在遇到异常时停止。（如果没有，请尝试选中“捕获异常时暂停”框。）当错误停止时，

组件

变量的值是多少？这就是您缺少的DOM元素。

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

debugger;

document.getElementById('autocomplete')