Question

我想显示包含（姓名，用户名，城市名称等）的用户信息，如果你点击用户名我想用google API显示用户信息，例如姓名，用户名，姓氏，CITY（使用坐标），当你点击窗口应该弹出的用户名，并一起显示静态地图信息，

有可能实现这一目标吗？如果是这样，你能提供一些教程或脚本吗？

注意：我是一个新手我甚至不知道从哪里开始解决这个问题，

这是我到目前为止所做的：

var data = [{ "id": 987, "username": "jstephensre", "active": false, "password": "8de90ec658d72b54ef0b270611ef9eb6241fa59b77b5c98b9bffb4fd631a4b10", "first_name": "Johnny", "last_name": "Stephens", "last_login": "6/7/2016", "email": "jstephensre@opensource.org", "avatar": "https://robohash.org/nihilpariaturrepudiandae.jpg?size=50x50&set=set1", "gender": [], "favorites": { "book-isbn": "117187617-3", "color": "#6adf06", "drugs": ["Zicam Cold Remedy Ultra Rapidmelts", "BUTALBITAL, ACETAMINOPHEN AND CAFFEINE"] }, "coordinates": { "lat": "8.65972", "lng": "-75.12809" } },
{ "id": 988, "username": "dtorresrf", "active": true, "password": "443f2261332613a2da952d05a25ceec2d8eb9ed177ce830b3b4d6fbbe536e2c0", "first_name": null, "last_name": "Torres", "last_login": null, "email": "atorresrf@facebook.com", "avatar": "https://robohash.org/idnihilut.bmp?size=50x50&set=set1", "gender": ["Female", "Female"], "favorites": { "book-isbn": null, "color": "#a04fce", "drugs": ["Cockroach, American", "Lisinopril and Hydrochlorothiazide"] }, "coordinates": { "lat": "9.86667", "lng": "6.71667" } },
{ "id": 989, "username": "jsmithrg", "active": false, "password": "4e9750746ad03f82717ebd702c03c92749de1cbc820798ab409fb5e6760101ad", "first_name": null, "last_name": "Smith", "last_login": null, "email": "tsmithrg@creativecommons.org", "avatar": null, "gender": ["Male"], "favorites": { "book-isbn": null, "color": "#3bff1e", "drugs": ["Yellow Pine", "Meprobamate", "GenRx Daily Defense Antifungal"] }, "coordinates": { "lat": "-16.00528", "lng": "-41.29722" } },
{ "id": 990, "username": "sroserh", "active": false, "password": "ab83a77062c8ee868f3b966d50a8ee39f63e3cec81349b83b81adcd3c6fa5da3", "first_name": "Sarah", "last_name": null, "last_login": "12/19/2015", "email": "sromerorh@about.me", "avatar": null, "gender": [], "favorites": { "book-isbn": "117541910-9", "color": "#ac8603", "drugs": ["MORUS ALBA POLLEN", "enema", "Altipres-B"] }, "coordinates": { "lat": "32.26616", "lng": "35.00893" } },
{ "id": 991, "username": "sholmesri", "active": false, "password": "11802fc53531079cdf8033e6772ffc5ac47c8ea8a453b66e8ac8df9ae29d9543", "first_name": "Susan", "last_name": "Holmes", "last_login": "1/28/2016", "email": "sholmesri@mozilla.com", "avatar": "https://robohash.org/doloreshicqui.png?size=50x50&set=set1", "gender": ["Male", "Male"], "favorites": { "book-isbn": "658583882-3", "color": "#04da21", "drugs": ["Tempra", "Estradiol Transdermal System"] }, "coordinates": { "lat": "-39.23686", "lng": "-70.9197" } },
{ "id": 992, "username": "rhayesrj", "active": true, "password": "beae358b1eb873bac4fa640410520157f26738ee4d2de1144f30101c6af8e259", "first_name": "Rachel", "last_name": "Hayes", "last_login": "12/7/2015", "email": null, "avatar": "https://robohash.org/teneturautest.jpg?size=50x50&set=set1", "gender": ["Male"], "favorites": { "book-isbn": "291847889-X", "color": null, "drugs": ["BUDESONIDE", "Doxorubicin Hydrochloride", "Hydrocodone Bitartrate and Acetaminophen"] }, "coordinates": { "lat": "-20.58333", "lng": "48.53333" } },
{ "id": 993, "username": "jcampbellrk", "active": false, "password": "9602ccbe7599aefea9a25eb05ab2ede44302f57fd153bad07aa0f5a2f46be537", "first_name": "Joan", "last_name": "Campbell", "last_login": "8/29/2016", "email": "jcampbellrk@bravesites.com", "avatar": "https://robohash.org/numquamutquae.png?size=50x50&set=set1", "gender": ["Male"], "favorites": { "book-isbn": "588841638-X", "color": "#7c5963", "drugs": [] }, "coordinates": { "lat": "57.6531", "lng": "14.6968" } },
{ "id": 994, "username": "ejamesrl", "active": false, "password": "55b1d2418621cda82225bf569f5f30c5b5fcfe5ae7aef6b1e3418a97335b47ab", "first_name": "Elizabeth", "last_name": "James", "last_login": "1/14/2016", "email": "ejamesrl@geocities.jp", "avatar": null, "gender": ["Female"], "favorites": { "book-isbn": "026417147-0", "color": "#ba1d5c", "drugs": ["Losartan Potassium and Hydrochlorothiazide", "Ramipril"] }, "coordinates": { "lat": "54.64043", "lng": "32.87811" } },
{ "id": 995, "username": "krogersrm", "active": true, "password": "c5a8921245a345fb133193f8ceb14021469b4f42a7d945e835b9497081fb7130", "first_name": "Kathleen", "last_name": null, "last_login": "6/13/2016", "email": "khansenrm@nationalgeographic.com", "avatar": "https://robohash.org/mollitiasuscipitmagnam.jpg?size=50x50&set=set1", "gender": ["Male"], "favorites": { "book-isbn": "636138809-3", "color": "#1c858e", "drugs": ["Tramadol Hydrochloride", "iBlanc Restora-Bright"] }, "coordinates": { "lat": "12.71402", "lng": "121.51242" } },
{ "id": 996, "username": "sperkinsrn", "active": false, "password": "c0f48289a4145ffd34374f7236ea4e650df57cff11f4f77b865a44dde410cfb8", "first_name": "Sarah", "last_name": "Perkins", "last_login": "8/31/2016", "email": null, "avatar": "https://robohash.org/consequaturculpavelit.png?size=50x50&set=set1", "gender": ["Male", "Male"], "favorites": { "book-isbn": "561211079-0", "color": null, "drugs": ["Caduet"] }, "coordinates": { "lat": "43.30472", "lng": "124.32778" } },
{ "id": 997, "username": "jlanero", "active": false, "password": "0430117ff30143b0f3727527f62346351582a396cc60a5bf599e674cc34c07c5", "first_name": "Jack", "last_name": "Lane", "last_login": "3/20/2016", "email": null, "avatar": null, "gender": [], "favorites": { "book-isbn": "819102101-3", "color": null, "drugs": ["RIFAMPIN"] }, "coordinates": { "lat": "51.8796", "lng": "4.5059" } },
{ "id": 998, "username": "wroserp", "active": true, "password": "626e6d1a1a92ff6e741ae21e3bbbae265000ca0f87306590c2344d4130dd57a9", "first_name": "Willie", "last_name": "Rose", "last_login": "10/16/2016", "email": null, "avatar": null, "gender": ["Male"], "favorites": { "book-isbn": "108540866-3", "color": null, "drugs": ["OXYGEN", "Garnier Fructis Antidandruff"] }, "coordinates": { "lat": "57.58167", "lng": "83.76917" } },
{ "id": 999, "username": "sphillipsrq", "active": false, "password": "de0a87749bb04b2630ac6dbeb7259947383189afb6c2b458d80a15f6881b0439", "first_name": "Stephanie", "last_name": "Phillips", "last_login": "11/24/2016", "email": "sphillipsrq@wikia.com", "avatar": "https://robohash.org/laborerepellendustemporibus.jpg?size=50x50&set=set1", "gender": [], "favorites": { "book-isbn": "721916787-3", "color": "#9eee74", "drugs": [] }, "coordinates": { "lat": "51.0016", "lng": "21.71474" } },
{ "id": 1000, "username": "phicksrr", "active": false, "password": "2a27d007956e55da298aa3fb427a5a8ed7a8d661f4d4a2e340a98026996521eb", "first_name": "Phyllis", "last_name": "Hicks", "last_login": "2/14/2016", "email": null, "avatar": "https://robohash.org/sedsednon.bmp?size=50x50&set=set1", "gender": ["Female", "Female"], "favorites": { "book-isbn": "268196481-4", "color": null, "drugs": ["Ibuprofen"] }, "coordinates": { "lat": "-6.22625", "lng": "106.0253" } }];



        var output = '<ul>';


        $.each(data, function(key, val) {

            //check the user if is active then display the active users
              if(val['active'] == true)
              {
            output += '<li>'<a  href=  + val.avatar + " " + val.first_name + " " + val.last_name + " " + val.coordinates " " + val.username +'</a></li>';





        }


                });

Answer 1

请尝试使用以下代码。我已经为你开始做了一些代码。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="userList">
</div>
<br/>
<div id="userDetails">
</div>

＆＃13;

onReceive()

＆＃13;

ChatMessage chatMessage = new ChatMessage(getIntent().getSerializableExtra("chatobj"));

＆＃13;

如何使用Jquery和Json API使用谷歌地图API的坐标显示城市名称？

1 个答案: