让geocoder同步调用 [英] make geocoder to call synchronously

问题描述

我有两个隐藏字段，其中包含纬度值和经度值，其中id为 #latitude_val和#longitude_val .I将设置变量 chicago 以及初始的经度和纬度。如果上面的两个字段为空，我将通过地名（这里是静态检查）并通过以下代码定位标记。

 函数初始化（）{
 chicago = new google.maps.LatLng（51.508742，-0.120850）; // （$（＃latitude_val）。val（）。length> 3）||（$（＃longitude_val）。val（）。length> 3））
的默认值
 {
 chicago = new google.maps.LatLng（$（＃latitude_val）。val（），$（＃longitude_val）。val（））; 
} 
 else 
 {
 geocoder = new google.maps.Geocoder（）; 
 geocoder.geocode（{'address'：'Abudhabi'}，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK）
 {
 console.log（results [0] .geometry.location.lat（）+''+ results [0] .geometry.location.lng（））; //如果为null，则应该先打印
 chicago = new google.maps.LatLng（results [0] .geometry.location.lat（），results [0] .geometry.location.lng（））; 
 console.log（'__'+ chicago）; //这应该打印第二个
} 
 else 
 {
 console.log（Geocode不成功，原因如下：+ status）; 
} 
}）; 
} 
 console.log（'****'+ chicago）; //这会打印第三个
 var mapOptions = {zoom：4，mapTypeId：google.maps.MapTypeId.ROADMAP ，center：chicago} 
 map = new google.maps.Map（document.getElementById（googlemap），mapOptions）; 
 var marker = new google.maps.Marker（{
 position：chicago，
 map：map，
 draggable：true，
 animation：google.maps.Animation .DROP 
}）; 
 
 marker.setMap（map）; 
}）; 
} 
  

我检查了 chicago



地图显示值为（51.508742，-0.120850），而不是新值


解决方案

所以，我猜你可能会从后端填充所述输入，为空。无论哪种方式，您都希望获得一个位置，然后只有，才能实现您的地图。

以下内容应该可以工作：

  var map; 
函数initialize（）{
 
 var createMapWithLocation = function（myposition）{
 var mapOptions = {
 zoom：4，
 mapTypeId：google.maps .MapTypeId.ROADMAP，
 center：myposition 
}，
 mymap = new google.maps.Map（document.getElementById（googlemap），mapOptions），
 marker = new google.maps.Marker（{
 position：myposition，
 map：mymap，
 draggable：true，
 animation：google.maps.Animation.DROP 
}） ; 
 console.log（'****'+ myposition）; //这应该打印第三个
返回mymap; 
}; 
 
 var chicago = new google.maps.LatLng（51.508742，-0.120850）; （默认值为
 if（（$（＃latitude_val）.val（）.length> 3）||（$（#longitude_val）.val（）.length> 3））{ 
 chicago = new google.maps.LatLng（$（＃latitude_val）。val（），$（＃longitude_val）。val（））; 
 map = createMapWithLocation（chicago）; 
} else {
 geocoder = new google.maps.Geocoder（）; 
 geocoder.geocode（{$ b $'address'：'Abudhabi'
}，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK） {
 console.log（results [0] .geometry.location.lat（）+''+ results [0] .geometry.location.lng（））; //如果为null，则应先打印
 chicago = new google.maps.LatLng（results [0] .geometry.location.lat（），results [0] .geometry.location.lng（））; 
 console.log（'__'+ chicago ）; //这应该打印第二个
 map = createMapWithLocation（chicago）; 
} else {
 console.log（Geocode不成功，原因如下：+ status）; 
} 
}）; 
 
 
 $ / code> 

您决定何时调用 createMapWithLocation 。如果输入是填充的，它将是同步的，如果不是，则是异步的。无论哪种方式，你都不需要事先知道芝加哥的位置。





请注意我已经在初始化函数之外声明了map，以防万一您想从控制台。

I have two hidden fields which contain latitude value values and longitude values having id-#latitude_val and #longitude_val.I will set variable chicago with a initial latitude and longitude.If above two fields are null,I will pass the place name (here statically for checking )and locate the marker by the following code.

function initialize() { 
  chicago = new google.maps.LatLng(51.508742,-0.120850);//default value
  if(($("#latitude_val").val().length >3) ||   ($("#longitude_val").val().length>3))
   {
   chicago =  new google.maps.LatLng($("#latitude_val").val(), $("#longitude_val").val());  
    }
  else
    { 
  geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': 'Abudhabi'}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK)
      {  
       console.log(results[0].geometry.location.lat()+' '+results[0].geometry.location.lng());//if null this should print first
       chicago = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng()); 
      console.log('__'+chicago);//this should print second    
      }
      else
      {
          console.log("Geocode was not successful for the following reason: " + status);
      }  
      }); 
   }
   console.log('****'+chicago);//this should print third
   var mapOptions = { zoom:4, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
   map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);  
   var marker=new google.maps.Marker({
    position:chicago,
    map:map,
   draggable:true,
   animation: google.maps.Animation.DROP
   });

   marker.setMap(map);
   });
 }

I have checked the value of chicago in cases.Here the default value is marked by the marker in the map.When I check console,the third one is printing first,the first one in second and second one in third.I didnt understand why this happens.I need to run this based on the order.

The map is showing with values (51.508742,-0.120850) rather than the new values

解决方案

So, I guess you might populate said inputs from the backend, and provide a fallback in case they are null. Either way, you want to get a location and only then you want to instance your map.

The following should work:

var map;
function initialize() {

  var createMapWithLocation=function(myposition) {
    var mapOptions = {
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myposition
      },
      mymap = new google.maps.Map(document.getElementById("googlemap"), mapOptions),
      marker = new google.maps.Marker({
        position: myposition,
        map: mymap,
        draggable: true,
        animation: google.maps.Animation.DROP
      });
      console.log('****' + myposition); //this should print third
    return mymap;
  };

  var chicago = new google.maps.LatLng(51.508742, -0.120850); //default value
  if (($("#latitude_val").val().length > 3) || ($("#longitude_val").val().length > 3)) {
    chicago = new google.maps.LatLng($("#latitude_val").val(), $("#longitude_val").val());
    map = createMapWithLocation(chicago);
  } else {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': 'Abudhabi'
    }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        console.log(results[0].geometry.location.lat() + ' ' + results[0].geometry.location.lng()); //if null this should print first
        chicago = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
        console.log('__' + chicago); //this should print second 
         map = createMapWithLocation(chicago);  
      } else {
        console.log("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}

You decide when to call createMapWithLocation. It will be synchronous if the inputs are populated, and asynchronous if they aren't. Either way, you don't need to know the position of chicago beforehand.

Please note I've declared map outside of the initialize function, just in case you want to inspect it from the console.

这篇关于让geocoder同步调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！