javascript - Ajax 和 Google Places API 获取 json

标签 javascript ajax json google-places-api

我正在制作一个简单的页面,您可以在文本框中输入城市名称,它会显示有关它们的基本信息(地址、名称等)。我在使用 Google Places API 时遇到问题。这是我目前所拥有的

restaurants.html

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Restaurant Search</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="jquery.js"></script>
        <script src="functions.js"></script>
        <script>
            $(document).ready(function(){
                getRestaurants();
            });
        </script>
    </head>
    <body>
        <div class="main">
            <form>
                Enter city name: <input id="city" type="text" name="cityname"><input id="btn" type="submit" value="Search">
            </form>
            <div id="error">
                The search field cannot be left empty!
            </div>
        </div>

        <div id="header">

        </div>
        <div id="items">

        </div>
    </body>
</html>

functions.js

function getRestaurants(){
    $("#btn").click(function(){
        if ($("#city").val().length==0){
            $("#error").css("display","block");
        }else{
            $("#error").css("display","none");
            var cityname = $("#city").val();
            var search_string = "https://maps.googleapis.com/maps/api/place/textsearch/json?query=restaurants+in+"+cityname+"&sensor=false&key=KEYKEYKEY";
            $.ajax({
                url: search_string
            }).done( function ( data ) {
                res ="";
                var obj = jQuery.parseJSON(data);
                $(obj).each(function(){
                    res+=this.name;
                });
                $("#items").text(res);
            });
        }
    });
}

style.css 只有这个

#error{
    display: none;
}

问题是什么?

最佳答案

查看此链接 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform 只需复制代码并根据您的需要进行定制

关于javascript - Ajax 和 Google Places API 获取 json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19962498/

相关文章:

javascript - 通过javascript传递变量

ajax - 将 jQuery ajax 调用包装在变量中,以便我可以在需要时设置Timeout 和clearTimeout?

json - 动态字典名称解码器 json

ruby-on-rails-3 - 在多级 JSON 数据的 Rails 数组中使用 has_key

javascript - 根据输入验证启用/禁用按钮

javascript - 这是在 JavaScript 中引用对象的安全方法吗?

javascript - Mongoose 更新所有文档

php - 如何在php中回显循环并将其放入变量中?

ios - JSON 解析文本为编码形式

javascript - 为什么我的数组没有按照我将对象插入数组的方式排序?