使用Zippopotam.us的JSON结果进行Google地图坐标
我编写的代码将要求用户输入一个输入（任意马来西亚邮政编码），该输入将从zippopotam.us获取一个JSON结果。以下是我的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment Lab 3</title>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
div #zipdiv, #citydiv, #statediv, #longitudediv, #latitudediv
{
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$(document).ready( function()
{
$("#citydiv").hide();
$("#statediv").hide();
$("#longitudediv").hide();
$("#latitudediv").hide();
$("#mapdiv").hide();
});
// OnKeyDown Function
$("#zcode").keyup(function() {
var zip_in = $(this);
var zip_box = $('#zipdiv');
if (zip_in.val().length<5)
{
zip_box.removeClass('error success');
}
else if ( zip_in.val().length>5)
{
zip_box.addClass('error').removeClass('success');
}
else if ((zip_in.val().length == 5) )
{
// Make HTTP Request
$.ajax({
url: "http://api.zippopotam.us/MY/" + zip_in.val(),
cache: false,
dataType: "json",
type: "GET",
success: function(result, success) {
// Make the city and state boxes visible
$('#citydiv').slideDown(200);
$('#statediv').slideDown(200);
$('#longitudediv').slideDown(200);
$('#latitudediv').slideDown(200);
// Zip Code Records Officially Map to only 1 Primary Location
places = result['places'][0];
$("#city").val(places['place name']);
$("#state").val(places['state']);
$("#long").val(places['longitude']);
$("#lat").val(places['latitude']);
zip_box.addClass('success').removeClass('error');
},
error: function(result, success) {
zip_box.removeClass('success').addClass('error');
}
});
}
});
});
function mapFunction() {
var mapOptions =
{
// Set up the map options
center: new google.maps.LatLng(),//coordinate should be from JSON results
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13,
};
var venueMap; // Map() draws a map
venueMap = new google.maps.Map(document.getElementById('map'), mapOptions);
}
function loadScript()
{
var script = document.createElement('script'); // Create <script> element
script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&callback=mapFunction';
document.body.appendChild(script); // Add element to page
}
window.onload = loadScript; // on load call loadScript()
$(document).ready(function()
{
$(".button").click(function()
{
$("#mapdiv").show(200);
});
});
</script>
</head>
<body>
<h3>Enter Malaysian Zip Code</h3>
<div>
<form action="#" method="post" class="form fancy-form">
<div id="zipdiv">
<label for="zip">Zip Code</label>
<input type="text" id="zcode" name="Zip code" placeholder="E.g : 48050">
</div>
<div id="citydiv">
<label id="city_lbl" for="city">City</label>
<input type="text" id="city" name="city">
</div>
<div id="statediv">
<label id="state_lbl" for="state">State</label>
<input type="text" id="state" name="state">
</div>
<div id="longitudediv">
<label id="lgtd_lbl" for="longitude">Longitude</label>
<input type="text" id="long" name="longitude">
</div>
<div id="latitudediv">
<label id="lttd_lbl" for="latitude">Latitude</label>
<input type="text" id="lat" name="latitude">
</div>
<button id="button" class="button" type="button" name="button">Submit</button>
<div id="mapdiv">Map here: <div id="map" style="width:400px;height:400px;"></div></div>
</form>
</div>
</body>
</html>
下面是用户可以从zippopotam.us获得的众多JSON结果示例之一：
{“邮政编码”：“01000”，“国家”：“马来西亚”，“国家缩写”：“我的”，“地点”:[{“地名”：“Kangar”，“经度”：“100.2056”，“州”：“Perlis”，“州缩写”：“PLS”，“纬度”：“6.4312”}]}
另一个例子：
{“邮政编码”：“48050”，“国家”：“马来西亚”，“国家简称”：“我的”，“地点”:[{“地名”：“拉旺”，“经度”：“101.5642”，“州”：“雪兰莪州”，“州简称”：“SGR”，“纬度”：“3.2559”}]}
我的程序应该从这些结果中提取纬度和经度的值，以便插入到
center: new google.maps.LatLng(latitude here, longitude here),
//coordinate should be from JSON results the user get
问题是，我尝试了许多方法，但似乎无法将JSON结果中的经纬度放到上面的代码中（除了手动编写数字，但这不是这个程序的工作方式）。
该程序应采取纬度和经度值，并自动插入到上面的代码，以便当用户单击提交按钮，谷歌地图生成从该坐标。
我怎么解决这个？提前感谢~
共有1个答案
将映射的初始化移到Mapdiv的.showcomplete函数中，以便在映射具有大小并且$.ajax调用的成功函数运行并填充places对象的值之后执行：
$(document).ready(function()
{
$(".button").click(function()
{
$("#mapdiv").show(200, function() {
mapFunction();
});
});
});
概念验证小提琴
jQuery.show函数文档
-
问题内容： 假设我正在使用Google的Gson库将JSON解析为Java数据结构。 如果Java字段没有对应的JSON，是否有一种简单的引发异常的方法？也就是说，我希望要求JSON具有Java结构中的所有字段。 问题答案： Gson没有JSON模式验证功能来指定必须存在一个特定的元素，也没有办法指定必须填充Java成员。拥有这样的功能（例如带有注释）可能会很好。转到“ Gson问题列表” 并提出
-
问题内容： 我正在尝试使用JSoup从Google抓取搜索结果。目前这是我的代码。 我只是想获取搜索结果的标题以及标题下方的摘录。是的，我只是不知道要搜寻这些元素要查找哪些元素。如果有人有更好的方法使用Java抓取Google，我想知道。 谢谢。 问题答案： 干得好。 另外，要自己完成此操作，我建议您使用chrome。您只需右键单击要刮取的任何内容，然后检查元素。它将带您到该元素位于html的确切
-
（不使用投影库）我知道我地图的中心点，(-37.500，175.500)。缩放（13）大小。400x400px，这是墨卡托投影（标准谷歌地图）。它被用作400x400px画布上的背景图像。我怎么算出这张地图的界限。
-
我正在使用VEMap API。我有一张地图的左上点和右下点（包围框）的纬度和经度。我要得到中心点。有什么简单的方法可以做到这一点？我在谷歌上搜索也找不到解决办法。 我在想的是，如果我能用上面提到的两点定义地图，那么我就能非常容易地得到中心：
-
我一直在研究这三个网站，了解如何使用log4j2创建地图查找（或任何其他查找）： http://logging.apache.org/log4j/2.x/manual/extending.html#Lookups http://logging.apache.org/log4j/2.x/manual/lookups.html http://logging.apache.org/log4j/2.x/m
-
虽然我们正在为一个特定的（但已经很大的）位置工作，但如果解决方案也能扩展到其他位置就更好了。因为我们只会缓存与系统有关的瓷砖，那么仅仅平铺enitre星球是最好的选择吗？瓦片的尺寸可以用弧秒/分钟来测量，或者这是个坏主意吗？ 我们已经使用了Postgres，这似乎可以用PostGIS来完成（这就是光栅吗？），但是在不知道我到底在找什么的情况下跳入文档/教程证明是很困难的。有什么想法吗？