Question

我是第一次在电子商务网站上实施谷歌空间自动完成搜索。我正在使用http://www.aspsnippets.com/Articles/Google-Places-AutoComplete-example-without-using-Maps.aspx实施帮助。

当我在HTML页面中使用时，它正常工作。

＆＃13;

.polaroid {
    width: 33%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
        rgba(0, 0, 0, 0.19);
    float: left;
    border: thin;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
}

img {
    width: 100%
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);

}

.container {
    text-align: center;
    padding: 10px 20px;
    float: left;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
}

.polaroid:HOVER {
    position:absolute;
    left: 20%;
    right: 20%;
    top:20%;
    z-index:10;
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.9);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);

}

＆＃13;

    var geocoder;
var map;
function initialize() {  
  var input = document.getElementById('id_address');
  var options = {
    types: ['address'],
    componentRestrictions: {
      country: 'in'
    }
  };

  autocomplete = new google.maps.places.Autocomplete(input, options);

  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") {
          document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
          
alert(place.address_components[i].long_name);
          
        }
      }
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

但是当我在我的项目中实现相同的东西时，它在浏览器的控制台中显示出一些错误。

SCREEN SHOT：

在浏览器中显示一些图标并禁用搜索。我无法理解这是什么问题。因为在HTML文件或jsfiddle工作正常。但不在网站上工作。

Answer 1

从你得到的错误看起来应该是：

从sensor=false&移除<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>。这样做不应该阻止您的脚本运行，但Google建议您将其删除。
使用key=参数向您的网址添加API密钥（如果有），或者创建并添加一个。这可能是你的主要问题。您可以点击＆＃34; GET A KEY＆＃34;链接页面右上角的here。

另外，调试这些消息时，您可能会发现error documentation很有帮助。

在网站中实施Google Places Api

1 个答案: