javascript - 如何在 getCurrentPosition 回调后执行 ajax 异步调用。

Question

我使用浏览器 Navigator getCurrentPosition 获得了当前位置。在 getCurrentPosition 回调函数中，我需要从纬度和经度中获取地址。我单独获取静态 map 图像。

问题:代码在将反向地理编码地址附加到#addressText 之前执行

  var mapImage;
  var addressDiv="<div id='addressCard'><img id="staticMap" src="/*MAP GOES THERE*/" /><p id="addressText"></p></div>
  addressDiv= $(addressDiv);
  if (navigator.geolocation) {
    var gotMap = navigator.geolocation.getCurrentPosition(function(position) {
      pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      mapImage = "https://maps.googleapis.com/maps/api/staticmap?center=" + pos.lat + "," + pos.lng + "&zoom=15&size=300x300&maptype=roadmap&markers=color:red&key=/*GOOGLE KEY GOES HERE*/";

      //static map added correctly.
      addressDiv= addressDiv.find("#staticMap").attr('src', mapImage);

      var REVERSE_GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + pos.lat + '%2C' + pos.lng + '&language=en';

      $.getJSON(REVERSE_GEOCODING).done(function(location) {
        console.log("location", location);
 addressDiv=addressDiv.find("#addressText").html(location[0].formatted_address );

        //getting address but not appending to addressDiv. It shows only map image.

      });
    });

结果应该同时包含 map 和地址，但没有显示出来。它仅显示静态 map 图像。

Answer 1

我假设第一个字符串中不匹配的引号只是您问题中的一个拼写错误，否则逻辑流程不会到达地理位置。

考虑到这一点，问题是因为您将 addressDiv 重新分配给 attr() 的字符串结果。由于 html() 方法的结果，您稍后也会执行相同的操作，该方法会更改目标元素。

要解决此问题，只需删除这些分配即可。您不必总是使用来自 jQuery 方法调用的响应。试试这个:

var mapImage, addressDiv = '<div id="addressCard"><img id="staticMap" src="/*MAP GOES THERE*/" /><p id="addressText"></p></div>';
var $addressDiv = $(addressDiv);

if (navigator.geolocation) {
  var gotMap = navigator.geolocation.getCurrentPosition(function(position) {
    pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    mapImage = "https://maps.googleapis.com/maps/api/staticmap?center=" + pos.lat + "," + pos.lng + "&zoom=15&size=300x300&maptype=roadmap&markers=color:red&key=/*GOOGLE KEY GOES HERE*/";
    $addressDiv.find("#staticMap").attr('src', mapImage); // remove variable assignment here

    var reverseGeocoding = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + pos.lat + '%2C' + pos.lng + '&language=en';
    $.getJSON(reverseGeocoding).done(function(location) {
      // remove variable assignment here
      $addressDiv.find("#addressText").html(location[0].formatted_address);
    });
  });

另请注意，您的 pos 对象似乎是多余的。您可以将 position.coords.latitude 和 ..longitude 直接连接到字符串中。