Question

我正在尝试制作一个从静态Web服务获取json输出的mashup应用程序。 mashup应用程序从json响应中获取纬度和经度数据，然后将其指向嵌入的良好地图中。

<html>
<form> 
  Post Code:<br> 
  <input type="text" id="postcode"><br> 
  <button onclick="getdata()">Submit</button>
</form>

<h1>Location on Google Map</h1>

<div id="map" style="width:400px;height:400px;background:yellow"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  function getdata() {
    var value1 = $("input#postcode").val();
    var settings = {
      "async": true,
      "crossDomain": true,
      "url": "http://localhost:8080/getlocation?postcode=" + value1,
      "type": "POST",
      "method": "GET"
    }

    $.ajax(settings).done(function(response) {
      data = JSON.parse(response);
      console.log(data['4000']['Latitude']);
      var lat = data['4000']['Latitude'];
      var lng = data['4000']['Longitude'];
      init(lat, lng);
    });

    function init(lat, lng) {
      latlng = new google.maps.LatLng(lat, lng);
      var mapOptions = {
        center: new google.maps.LatLng(lat, lng),
        zoom: 20,
        mapTypeId: google.maps.MapTypeId.HYBRID
      }
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
      var customMarker = new google.maps.Marker({
        position: latlng,
        map: map,
      });
    }
  }
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=getdata"></script>
</html>

但是我无法将不同的值传递给参数'postcode' “ http://localhost:8080/getlocation?postcode=”。传递的值应类似于4010、4011等

Answer 1

我认为是因为您的<script src="https://maps.googleapis.com/maps/api/js?callback=getdata"></script>是在自定义脚本之后启动的。 Google Maps API应该在您的代码之前声明。将其放在包含自定义代码的<script>标签上方

Ajax jQuery无法传递参数

1 个答案: