Javascript 获取要使用API调用数据更新的标记

我有一个输入框，用户在其中输入城市名称，然后执行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>

函数更新映射（obj）{
var geo=new google.maps.Geocoder（）；
geo.geocode（{'address'：obj.value}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
var lat=results[0]。geometry.location.lat（）；
var lng=results[0]。geometry.location.lng（）；
var latlng=新的google.maps.latlng（lat，lng）；
var mapOptions={center:latlng，zoom:6，vmapTypeId:google.maps.MapTypeId.ROADMAP}；
var mapeelement=document.getElementById（'map'）；
var map=new google.maps.map（mapElement，mapOptions）；
var latlngString=lat.toString（）+'，'+lng.toString（）；
变量URL=”https://api.forecast.io/forecast/APIKEY/“+latlngString；
var marker=new google.maps.marker（{position:latlng，map:map}）；
updateTemp（URL、标记）
}
});       
}
函数updateTemp（URL、标记）{
$.ajax({
url:url，
jsonp：“回调”，
数据类型：“jsonp”，
成功：功能（响应）{
var t=响应['当前]['温度]；
var msg='当前温度：'+t+'F'；
marker.setTitle（msg）；
},
异步：false
});
}

您的标记变量是geocoder回调函数的本地变量。将其设置为全局（或updateMap函数的本地）

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

代码片段：

var标记；
函数更新映射（obj）{
var geo=new google.maps.Geocoder（）；
地理编码({
“地址”：obj.value
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
var lat=results[0]。geometry.location.lat（）；
var lng=results[0]。geometry.location.lng（）；
var latlng=新的google.maps.latlng（lat，lng）；
变量映射选项={
中心：拉特林，
缩放：6，
vmapTypeId:google.maps.MapTypeId.ROADMAP
};
var mapeelement=document.getElementById（'map'）；
var map=new google.maps.map（mapElement，mapOptions）；
var latlngString=lat.toString（）+'，'+lng.toString（）；
变量URL=”https://api.forecast.io/forecast/APIKEY/“+latlngString；
marker=新的google.maps.marker({
位置：latlng，
地图：地图
});
updateTemp（URL、标记）
}
});
}
函数updateTemp（URL、标记）{
/*$.ajax({
url:url，
jsonp：“回调”，
数据类型：“jsonp”，
成功：功能（响应）{
var t=响应['当前]['温度]；
var msg='当前温度：'+t+'F'；
marker.setTitle（msg）；
},
异步：false
}); */
setTimeout（函数（）{
标记。设置标题（“90度”）；
}, 10000);
}

html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

---

您的标记变量是geocoder回调函数的本地变量。将其设置为全局（或updateMap函数的本地）

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

代码片段：

var标记；
函数更新映射（obj）{
var geo=new google.maps.Geocoder（）；
地理编码({
“地址”：obj.value
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
var lat=results[0]。geometry.location.lat（）；
var lng=results[0]。geometry.location.lng（）；
var latlng=新的google.maps.latlng（lat，lng）；
变量映射选项={
中心：拉特林，
缩放：6，
vmapTypeId:google.maps.MapTypeId.ROADMAP
};
var mapeelement=document.getElementById（'map'）；
var map=new google.maps.map（mapElement，mapOptions）；
var latlngString=lat.toString（）+'，'+lng.toString（）；
变量URL=”https://api.forecast.io/forecast/APIKEY/“+latlngString；
marker=新的google.maps.marker({
位置：latlng，
地图：地图
});
updateTemp（URL、标记）
}
});
}
函数updateTemp（URL、标记）{
/*$.ajax({
url:url，
jsonp：“回调”，
数据类型：“jsonp”，
成功：功能（响应）{
var t=响应['当前]['温度]；
var msg='当前温度：'+t+'F'；
marker.setTitle（msg）；
},
异步：false
}); */
setTimeout（函数（）{
标记。设置标题（“90度”）；
}, 10000);
}

html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

---

当我把钥匙放进去时，这对我很有效。注意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);
                         }
                    });

    }

---

当我把钥匙放进去的时候，这对我有用。注意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);
                         }
                    });

    }

---

谢谢你的回答，关于使用ajax函数获取实时数据，我应该把它放在setTimeout函数中吗？不，你的ajax函数应该按原样工作（但你没有提供一个可测试的示例）。谢谢你的回答，关于使用ajax函数获取实时数据，我应该把它放在