-2
我創建了一個簡單的移動應用程序，當用戶輸入郵政編碼和距離時，可以搜索Best Buy Store API。該應用程序工作正常，但我想加載我的JSON輸出到谷歌地圖，最好與製造商或如果它更容易通過超鏈接到個人地圖。嘗試將json輸出加載到Google地圖中
這是我的代碼的第一頁捕捉一個HTML頁面上的用戶輸入：
<head>
<link rel="stylesheet" media="screen" href="todolist.css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript" src="js/prowebapps.js"></script>
<script type="text/javascript" src="js/sprintf.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
var cookieName = "smartHomePage";
var url = "SmarthomePage2.html?";
/**
store cookie, then redirect to page2
**/
function goto(){
storeCookies();
var zip = $("#zipcode").val();
var miles = $("#milesdistance").val();
url = url + "zip=" + zip + "&miles=" + miles;
url += "&placeholder=";
window.location = url;
}
function printCookies(){
var cookieValue = getCookie(cookieName);
if(cookieValue == "")
alert("I have nothing!");
else
alert(cookieValue);
}
function storeCookies(){
var zip = $("#zipcode").val();
var miles = $("#milesdistance").val();
var cookieValue = "zip=" + zip + "&miles=" + miles;
setCookie(cookieName, cookieValue);
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0)
return c.substring(name.length, c.length);
}
return "";
}//getCookie
function setCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}//setCookie
</script>
</head>
<h1>SmartHomes Store Locator</h1>
<ul>
<li><input type="text" name="zip[zipcode]" id="zipcode" placeholder="Zip Code"/></li>
<li><input type="text" name="miles[distance]" id="milesdistance" placeholder="Distance In Miles" /></li>
<li class="naked">
<button onclick="goto();">Search</button>
</li>
<!--
<button onclick="printCookies();">print cookies</button><br />
<button onclick="storeCookies();">store cookies</button><br />
-->
<button onclick="setCookie('smartHomePage','');location.reload();">Delete Previous Search</button>
<div id="cachedArea">
</div>
<script>
var pageScopeCookie = getCookie(cookieName);
if(pageScopeCookie != ""){
url = url + pageScopeCookie + "&placeholder=";
var anchor = "<a href=" + url + ">Previous Search</a>";
$("#cachedArea").html(anchor);
}
</script>
</ul>
一旦用戶輸入他們的參數，我顯示第二HTML網頁上的結果。代碼在這裏：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen" href="todolist.css" />
<title>Search Results</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 25%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript" src="js/prowebapps.js"></script>
<script type="text/javascript" src="js/sprintf.js"></script>
<script type="text/javascript">
function dosomething(){
var key = "";
var zip = getUrlVars()["zip"];
var miles = getUrlVars()["miles"];
if((zip == null) || (zip.length == 0)){
alert("missing zip code");
return;
}
if((miles == null) || (miles.length == 0)){
alert("missing miles");
return;
}
var api = "http://api.bestbuy.com/v1/stores(area(" + zip + ", " + miles + "))?format=json&apiKey=" + key + "&show=storeId,name, address, city";
$.ajax({url: api, success: function(result)
{
var stores = result.stores;
var printStores = "<ul>";
for(var i = 0; i < stores.length; i++){
var store = stores[i];
var name = store.name;
var address = store.address;
var city = store.city;
printStores += "<li /> " + name + address + city;
}
printStores += "</ul>";
$("#resultDiv").html(printStores);
}
});
//$("#resultDiv").html("<h3>hey james</h3>");
}
/**
obtain query string
**/
function getUrlVars(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++){
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
</head>
<body>
<h1>Smart Homes Locator Results</h1>
<div id="resultDiv"></div>
<script>
dosomething();
</script>
<a href="SmartHomesPage1.html">back</a>
</body>
</html>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 44.976505, lng: -93.262682},
zoom: 10
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"
async defer></script>
<div class="social">
<div class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="pauldessert">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.seedtip.com&width&layout=button_count&action=like&show_faces=true&share=true&height=21&appId=752601418144350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
</div>
</body>
</html>
一切工作正常，我可以調用距離Best最佳API和顯示結果存儲，一個基本的谷歌地圖一起。我很好奇，將我的json輸出加載到Google Map中有多困難，即將商店位置設置爲超鏈接並在點擊時加載到Google地圖中。
預先感謝您。
謝謝！我會嘗試一下。 – mannj2018
好的，只要確保有一個div，id =「map」即可。讓我知道它是否有效！ –