Javascript 使用来自ZippoTam.us的JSON结果进行谷歌地图协调_Javascript_Json_Google Maps_Google Maps Api 3

Javascript 使用来自ZippoTam.us的JSON结果进行谷歌地图协调

javascript json google-maps google-maps-api-3

Javascript 使用来自ZippoTam.us的JSON结果进行谷歌地图协调,javascript,json,google-maps,google-maps-api-3,Javascript,Json,Google Maps,Google Maps Api 3,我编写的代码将要求用户输入一个输入（任何马来西亚邮政编码），该输入将从Zippopotam.us获取一个JSON结果。以下是我的全部代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Assignment Lab 3</title> <style> input[type=text], select {

我编写的代码将要求用户输入一个输入（任何马来西亚邮政编码），该输入将从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>

问题是，我已经尝试了很多方法，但似乎我无法将JSON结果中的纬度和经度添加到上述代码中（除了手动编写数字，但这不是该程序的工作方式）

程序应该获取纬度和经度值，并将其自动插入到上述代码中，以便当用户单击提交按钮时，从该坐标生成谷歌地图

我如何解决这个问题？先谢谢你~

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

如果要设置过渡动画，请使用

venueMap.panTo(myLatLng);

考虑检查。

将映射的初始化移动到

.show

mapDiv的complete函数中，以便在映射具有大小和

$的success函数后执行。ajax

调用已运行并填充

places

对象的值：

$(document).ready(function()
{
  $(".button").click(function()
  {
    $("#mapdiv").show(200, function() { 
      mapFunction();
    });
  });
});

.show（[duration][，complete]）

持续时间（默认值：400）
类型：数字或字符串
确定动画将运行多长时间的字符串或数字。

完成
类型：函数（）
动画完成后要调用的函数，每个匹配元素调用一次

好吧，我已经试过了。它不起作用。地图变为空白的部分。不过，还是要感谢您帮助我。google.maps.event.trigger（map，'resize'）；可以解决你的问题，因为你初始化你的地图，而你的div是隐藏的。哦，我的上帝，它的工作！非常感谢。我从没想过我能把mapFunction（）放进去。show（）再次感谢！

$(document).ready(function()
{
  $(".button").click(function()
  {
    $("#mapdiv").show(200, function() { 
      mapFunction();
    });
  });
});