2017-08-02 5 views
0

ユーザー名(ユーザー名、ユーザー名、都市名など)を含むユーザー情報を表示したい場合、ユーザー名をクリックすると、ユーザー名、ユーザー名、姓などの情報が表示されます。静的な地図を一緒に表示してその情報を表示する必要があるユーザ名をクリックしてください。JqueryとJson APIを使用してGoogleマップAPIで座標を使用して都市名を表示する方法は?

これは可能でしょうか?もしそうなら、あなたはそれを行うためのチュートリアルやスクリプトを提供することができますか?

注:

var data = [{ "id": 987, "username": "jstephensre", "active": false, "password": "8de90ec658d72b54ef0b270611ef9eb6241fa59b77b5c98b9bffb4fd631a4b10", "first_name": "Johnny", "last_name": "Stephens", "last_login": "6/7/2016", "email": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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>'; 





     } 


       }); 
+0

あなたは新しいしていると述べました。私は、あなたが達成したいこのタスク、すなわち[ブートストラップモーダル](http://getbootstrap.com/javascript/#modals)と[Google Maps API](https://developers.google.com/マップ/ドキュメント/埋め込み/ガイド)ドキュメント。 – Spingolini

+0

ありがとうbror私は最高を試してみます –

答えて

1

を以下のコードで試してみてください:私はこの問題に開始する場合であっても知らない初心者です、ここで

は、私がこれまで行っているものです。私はあなたが始めるためのいくつかのコードを作っています。

var data = [{ 
 
    "id": 987, 
 
    "username": "jstephensre", 
 
    "active": false, 
 
    "password": "8de90ec658d72b54ef0b270611ef9eb6241fa59b77b5c98b9bffb4fd631a4b10", 
 
    "first_name": "Johnny", 
 
    "last_name": "Stephens", 
 
    "last_login": "6/7/2016", 
 
    "email": "[email protected]", 
 
    "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": "[email protected]", 
 
    "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": "[email protected]", 
 
    "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": "srome[email protected]", 
 
    "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": "[email protected]", 
 
    "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": "[email protected]", 
 
    "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": "[email protected]", 
 
    "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": "[email protected]", 
 
    "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": "[email protected]", 
 
    "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>'; 
 
$(document).ready(function() { 
 

 
    $.each(data, function(key, val) { 
 
    //check the user if is active then display the active users 
 
    if (val['active'] == true) { 
 
     output += "<li><a href='#' onclick='getAddress(\"" + val.username + "\"," + val.coordinates.lat + "," + val.coordinates.lng + ")'>First Name: " + val.first_name + ",Last Name: " + val.last_name + ", Username: " + val.username + ",Lat: " + val.coordinates.lat + ",Lng: " + val.coordinates.lng + "</a></li>"; 
 
    } 
 
    }); 
 
    $("#userList").html(output); 
 
}); 
 

 
function getAddress(username, latitude, longitude) { 
 
    var lat = latitude; //pass latitude value.. 
 
    var lng = longitude; //pass longitude value.. 
 
    $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lng + "&sensor=true", function(json) { 
 
    //result contains json 
 
    var address = json.results[0].formatted_address; 
 

 
    $("#userDetails").html("<b>UserName:</b> " + username + "<br/><b>Address: </b>" + address); 
 
    }); 
 
}
#userList { 
 
    border: 1px solid blue; 
 
} 
 

 
#userDetails { 
 
    background-color: lightblue; 
 
    padding:5px; 
 
} 
 
a{ 
 
    text-decoration:none; 
 
}
<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>

+0

hii、私はhtmlで何も表示しないようにしました。jsfiddleで表示してください。あなたは助けてくれてありがとうございます。 –

+0

こんにちは@BongeLaBwana。私は答えを更新し、フルコードを追加しました。 – Sanil

+0

ユーザ名を表示して都市を調整してください! –

関連する問題