Question

我制作的代码会要求用户输入输入（任何马来西亚邮政编码），输入将从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 Result的众多示例之一：

{“邮政编码”：“01000”， “国家”：“马来西亚”， “国家缩写”：“我的”， “地方”：[{“地名”：“Kangar”，“经度”：“100.2056”，“州”：“Perlis”， “州名缩写”：“PLS”，“纬度”：“6.4312”}]}

另一个例子：

{“邮政编码”：“48050”，“country”：“Malaysia”，“country abbreviation”：“MY”，“places”：[{“地名”：“Rawang”，“经度”：“ 101.5642“，”州“：”雪兰莪“，”州名缩写“：”SGR“，”纬度“：”3.2559“}]}

我的程序应该将这些结果中的纬度和经度值插入

center: new google.maps.LatLng(latitude here, longitude here),
//coordinate should be from JSON results the user get

问题是，我尝试了很多方法，但似乎我无法将JSON结果的纬度和经度放到上面的代码中（除了手动编写数字，但这不是这个程序的假设）上班）。

程序应该取纬度和经度值，并自动将其插入上面的代码，这样当用户点击“提交”按钮时，就会从该坐标生成Google地图。

我该如何解决这个问题？提前谢谢〜

Answer 1

将地图的初始化移动到.show的{{1}}完整函数中，以便在地图具有{{em>>的大小和{的成功函数后执行 {1}}调用已运行并填充mapDiv对象的值：

$.ajax

proof of concept fiddle

jQuery .show function documentation


.show（[duration] [，complete]）



<小时/>   持续时间（默认值：400）
  类型：数字或字符串
  确定动画运行时间的字符串或数字      的完整
  类型：功能（）
  动画完成后调用的函数，每个匹配元素调用一次。

Answer 2

myLatLng = new google.maps.LatLng(places['latitude'], places['longitude']); //from your response
venueMap.setCenter(myLatLng);

如果您想要转换动画，请使用

venueMap.panTo(myLatLng);

考虑检查Google Maps JavaScript API Reference。

使用Zippopotam.us的JSON结果为Google地图坐标

2 个答案:

.show（[duration] [，complete]）