谷歌地图搜索自动完成功能无法正常工作

时间:2016-07-10 14:54:08

标签: javascript google-maps jsp

我尝试了几个代码但谷歌的下拉建议不会显示,我只想简单搜索自动完成Sample code/design that i want

我不认为我的api键存在问题,因为地图显示,一切正常但是自动完成下拉搜索的地方不会显示,当我试图在搜索按钮旁边放一个按钮时它可以返回值。 / p>

   
            function init() {
                var input = document.getElementById('locationTextField');
                var autocomplete = new google.maps.places.Autocomplete(input);
            }

            google.maps.event.addDomListener(window, 'load', init);
     
<html>
    <head>
        <title>www.W3docs.com</title>
        <style>
            input {
                height: 30px;
                padding-left: 10px;
                border-radius: 4px;
                border: 1px solid rgb(186, 178, 178);
                box-shadow: 0px 0px 12px #EFEFEF;
            }
        </style>
    </head>
    
    
    <body>
        <label for="locationTextField">Location</label>
        <input id="locationTextField" type="text" size="50">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
     
    </body>
       

</html>

1 个答案:

答案 0 :(得分:0)

您的代码似乎很好。问题出在您的API链接上。您必须指定自己的密钥,否则您将无法使用该库。

您可以使用:

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

...但是您会收到警告,指出您的密钥未设置。

以下是一个例子:http://codepen.io/anon/pen/QEqAwg

要获取免费 API密钥,请访问Google Developer网站,然后点击获取密钥https://developers.google.com/maps/documentation/javascript/tutorial