Question

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

问题：在将反向地理编码地址附加到#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.

      });
    });

结果应包含地图和地址，但不会显示。它仅显示静态地图图像。

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连接到字符串。

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

1 个答案: