javascript - 为什么调用google map api后需要写alert()

Question

当我获取 ajax 标记数据并在该 map 未加载之后调用 initMap 函数时，我想在 google map 上添加标记，但是当我在 initMap 之前添加警报时> 函数， map 已加载。

这有效并显示 map 和标记:

$('#ddlLatLog').on("change", function() {
  jQuery.getJSON('@Url.Action("GetLatLog", "MyTheme", new { area = "" })', {
      id: $(this).find('option:selected').attr('Value')
    },
    function(jdata) {
      markermap = jdata;
    });
  alert(markermap);
  initMap(centermap, markermap);
});

不加载 map

$('#ddlLatLog').on("change", function() {
   jQuery.getJSON('@Url.Action("GetLatLog", "MyTheme", new { area = "" })', {
       id: $(this).find('option:selected').attr('Value')
     },
     function(jdata) {
       markermap = jdata;
     });
   // alert(markermap);
   initMap(centermap, markermap);
 });

调用谷歌 API:

<script src="http://maps.google.com/maps/api/js?v=3.26&key=...callback=initMap" async defer></script>

为什么我需要警报？

Answer 1

没有 alert map 无法加载的原因是 jQuery.getJSON 是一个 async 调用。因此，当您放置 alert 时，浏览器有时间完成 ajax 调用，响应在 initMap 被调用之前返回。但在其他情况下，当您删除 alert 时，它不会发生。为了克服这个问题；你只需要在 jQuery.getJSON 的成功处理程序中移动你的 initMap(centermap, markermap); 如下:

$('#ddlLatLog').on("change", function() {
  jQuery.getJSON('@Url.Action("GetLatLog", "MyTheme", new { area = "" })', {
      id: $(this).find('option:selected').attr('Value')
    },
    function(jdata) {
      markermap = jdata;

      initMap(centermap, markermap);
    });
});