使用API​​调用数据获取标记以进行更新

Question

我有一个输入框，用户输入城市名称并执行updateMap功能。它用标记对城市进行地理定位和地图绘制。然后调用另一个名为updateTemp的函数，用当前温度更新标记标题。我用ajax来获取温度。我是Javascript的新手，希望得到以下代码不起作用的原因（出于教育目的）和一些解决方案。

<input id="cityInput" class="controls" type="text" placeholder="Search Box">
<input name="buttonExecute" onclick="updateMap(document.getElementById('cityInput'))" type="button" value="Execute" />
<div id="map"></div>


    <script>

      function updateMap(obj) {
            var geo = new google.maps.Geocoder();

            geo.geocode({'address':obj.value},function(results,status){
                        if(status == google.maps.GeocoderStatus.OK){
                               var lat = results[0].geometry.location.lat();   
                               var lng = results[0].geometry.location.lng();
                               var latlng = new google.maps.LatLng(lat,lng);
                               var mapOptions = { center: latlng, zoom: 6,vmapTypeId: google.maps.MapTypeId.ROADMAP};
                               var mapElement = document.getElementById('map');
                               var map = new google.maps.Map(mapElement,mapOptions);
                               var latlngString = lat.toString() +','+lng.toString(); 
                               var URL = "https://api.forecast.io/forecast/APIKEY/"+latlngString;
                               var marker = new google.maps.Marker({position:latlng, map:map});
                               updateTemp(URL,marker) 
                        }
            });       
        }

        function updateTemp(URL,marker){

                    $.ajax({
                             url: URL,
                             jsonp: "callback",
                             dataType: "jsonp",
                             success: function( response) {
                                    var t = response['currently']['temperature'];
                                    var msg = 'CURRENT TEMPERATURE: ' + t + 'F';
                                    marker.setTitle(msg);
                             },
                            async:false
                        });


        }


    </script>

Answer 1

当我把钥匙放进去时，这对我有用。注意ajax的改变。

function updateMap(obj) {

        var geo = new google.maps.Geocoder();
        geo.geocode({'address':obj.value},function(results,status){

                    if(status == google.maps.GeocoderStatus.OK){
                           var lat = results[0].geometry.location.lat();   
                           var lng = results[0].geometry.location.lng();
                           var latlng = new google.maps.LatLng(lat,lng);
                           var mapOptions = { center: latlng, zoom: 6,vmapTypeId: google.maps.MapTypeId.ROADMAP};
                           var mapElement = document.getElementById('map');
                           var map = new google.maps.Map(mapElement,mapOptions);
                           var latlngString = lat.toString() +','+lng.toString(); 
                           var URL = "https://api.forecast.io/forecast/68a746738dddfee5ac67c77bcb97e59b/"+latlngString;
                           marker = new google.maps.Marker({position:latlng, map:map});
                           updateTemp(URL,marker) 
                    }
        });  
    }

    function updateTemp(URL,marker){

                $.ajax({
                        url: URL,
                         type: "GET",
                        dataType: "jsonp",
                         success: function(response) {
                                var t = response['currently']['temperature'];
                                var msg = 'CURRENT TEMPERATURE: ' + t + 'F';
                                marker.setTitle(msg);
                         }
                    });

    }

Answer 2

您的标记变量是地理编码器回调函数的本地变量。使其成为全局（或updateMap函数的本地）。

proof of concept fiddle

（通过调用setTimeout模拟ajax调用，给它10秒钟来更新标记的标题）

代码段

＆＃13;

＆＃13;

var marker;
function updateMap(obj) {
  var geo = new google.maps.Geocoder();

  geo.geocode({
    'address': obj.value
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var lat = results[0].geometry.location.lat();
      var lng = results[0].geometry.location.lng();
      var latlng = new google.maps.LatLng(lat, lng);
      var mapOptions = {
        center: latlng,
        zoom: 6,
        vmapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var mapElement = document.getElementById('map');
      var map = new google.maps.Map(mapElement, mapOptions);
      var latlngString = lat.toString() + ',' + lng.toString();
      var URL = "https://api.forecast.io/forecast/APIKEY/" + latlngString;
      marker = new google.maps.Marker({
        position: latlng,
        map: map
      });
      updateTemp(URL, marker)
    }
  });
}

function updateTemp(URL, marker) {

/*  $.ajax({
    url: URL,
    jsonp: "callback",
    dataType: "jsonp",
    success: function(response) {
      var t = response['currently']['temperature'];
      var msg = 'CURRENT TEMPERATURE: ' + t + 'F';
      marker.setTitle(msg);
    },
    async: false
  }); */
  setTimeout(function() {
  marker.setTitle("90 degrees");
  }, 10000);


}

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="cityInput" class="controls" type="text" placeholder="Search Box">
<input name="buttonExecute" onclick="updateMap(document.getElementById('cityInput'))" type="button" value="Execute" />
<div id="map"></div>

＆＃13;

＆＃13;

＆＃13;