Question

我正在尝试解决使用Google地图自动填充功能的集成问题，我必须在我的drupal 7网站上集成javascript代码。下面的代码在jsfiddle上运行正常，但在drupal网站上并非如此，我无法找到为什么自动填充功能不起作用。

以下是一些可能有助于我解决此问题的信息。

我将代码集成在正文后面的“script”标签中。
控制台中未显示任何错误。
我使用drupal 7 webforms，但它不应该是一个问题，因为我还使用html.tpl.php脚本中的其他javascript代码来定位其他表单输入。

以下是代码：

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&KEY"> ... </script>

的Javascript

data = [{
  "1" : ["1007","1020"],
  "2" : ["1201","1493"],
  "3" : ["6754","8652"],
}]

var localityInput = document.getElementById('locality');
var localityOptions = {
  types: ['(regions)'],
  componentRestrictions: {country: 'ch'}
};

autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    for (var i = 0; i < place.address_components.length; i++) {
        for (var j = 0; j < place.address_components[i].types.length; j++) {
            if (place.address_components[i].types[j] === "postal_code") {
                var value = place.address_components[i].long_name;
                document.getElementById('locality').value = value;
                var foundIt = false;

                for (var i = 0; i < data.length && !foundIt; i++) {
                    for (var key in data[i]) {
                        if (key in data[i]) {
                            if (data[i][key].indexOf(value) !== -1){
                                document.getElementById('text').innerHTML = key;
                                foundIt = true;
                            } 
                        }

                    }
                    if (!foundIt) {
                        document.getElementById('text').innerHTML = 0;
                    }
                }
          } 
       }
  }
})

代码只是从自动填充建议中获取谷歌地图邮政编码并检查它是否在数据中，一切正常在JsFiddle上，所以我不知道这是否也会影响网站。

HTML （只是此代码表单的一个示例）

<form>
    <input id="text"/>
    <input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" />
</form>

为什么我没有Google地图自动填充功能的建议？我做错了什么？

请建议。

Answer 1

经过几个小时的努力，我发现我必须把JS放在一个函数中并按如下所示启动它。

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>

Drupal 7 - Google Maps Autocomplete的Javascript集成问题

1 个答案: