尝试将json输出加载到谷歌地图中
Trying load json output into Google Maps
我创建了一个简单的移动应用程序，当用户输入邮政编码和距离时，它会搜索百思买商店API。该应用程序运行良好，但我想将我的json输出加载到谷歌地图中，最好是与制造商一起加载，或者如果更容易的话，可以通过超链接加载到单个地图中。
这是我在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>
一切都很好，我可以调用最佳API和显示商店的结果，以及基本的谷歌地图。我很好奇将我的json输出加载到谷歌地图中有多难，即将商店位置作为超链接，并在单击时加载到谷歌图中。
提前谢谢。
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(LAT of MAP CENTER, LONG of MAP CENTER),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < DATAOBJECT(BESTBUY STORES).length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(EACHSTORE[i].LAT, EACHSTORE[i].LONG),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var contentString = '<div align="center"><br/>' + '<h4 align="center">' + EACHSTORE[i].NAME + '</h4><br/>' +
'<h6 align="center">' + EACHSTORE[i].ADDRESS + '<h6></div>'
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
}
我最近才这么做。您需要定义映射的中心，然后遍历每个数据对象，根据其纬度和长度为其分配一个标记。当用户单击标记时，他们将能够看到contentString的值。我不确定这是否对你有效，但它应该有助于总体思路。
相关文章：
- 如何在谷歌字体加载时显示加载图像
- 谷歌地图加载后隐藏加载图像
- 如何在不下载的情况下将谷歌字体加载到chrome打包的应用程序中
- 无法让谷歌地图加载到页面上
- 让谷歌地图加载*后*找到用户的位置
- 成功登录谷歌后加载页面
- 谷歌地图加载静态图像
- 谷歌地图加载路线
- 谷歌地图加载需要很长时间
- 谷歌地图加载后发出ajax请求
- 谷歌地图加载部分点击隐藏标签
- 谷歌地图-加载KML覆盖
- 使用javascript从谷歌地图加载json数据
- 如何检测如果谷歌地图加载成功
- 防止谷歌地图加载多次与涡轮链接
- 谷歌地图加载问题
- 谷歌地图加载后会覆盖所有内容
- 谷歌地图加载在不同的拉长从AJAX调用
- 谷歌地图加载图像像
- 谷歌地图加载了Ajax
