如何首先执行Ajax调用以获取lat / lng，然后使用标记加载Google地图？

我正在进行ajax调用以检索存储在sql数据库中的lat和lng存储位置。 这是我的ajax调用并返回所有lats和lngs的json对象。

$.ajax({ type:"GET", dataType:"json", url:"", success: function(result) { my_arr = result; for(var i=0;i<result.length;i++) { store_points(result[i].lat,result[i].lng) } }); 

现在我已将此json对象存储在我自己的数组对象中，该对象将用于在地图上添加标记。 这是在加载地图之前完成的。

  var point=[]; point = [ new google.maps.LatLng(37.569309, -122.32617500000003) ]; function store_points(lat,lng) { //used to show markers point = [ new google.maps.LatLng(lat,lng) ]; } var map; var mapOptions = { center: new google.maps.LatLng(51.3, -1.80), zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900", new google.maps.Size(70, 83), new google.maps.Point(0, 0), new google.maps.Point(10, 34)); var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", new google.maps.Size(89, 85), new google.maps.Point(0, 0), new google.maps.Point(12, 35)); function initialize() { map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); for (var i = 0; i < point.length; i++) { var marker = new MarkerWithLabel({ map: map, position: point[i], icon: pinImage, shadow: pinShadow, labelContent: count, labelAnchor: new google.maps.Point(12, -5), labelClass: "labels" }); } } google.maps.event.addDomListener(window, 'load', initialize); 

我的问题是地图是在窗口加载时加载的（如最后一行代码所示），但我的ajax调用稍后执行，因此点数组永远不会填充。 如何强制ajax调用首先获取lat和lng并填充points数组，然后使用points数组中的标记信息加载map。

Answer 1

您有两个单独的异步事件：

1. 在页面加载事件上映射初始化
2. ajax返回标记的数据

一个选项是创建一个单独的函数，一旦初始化地图就显示标记，在地图初始化结束时调用它和ajax成功函数，然后顺序无关紧要，当两者都发生时，标记将是显示在地图上。

全局范围内的变量：

 var points = []; var map = null; 

AJAX：

 $.ajax({ type:"GET", dataType:"json", url:"", success: function(result) { for(var i=0;i 

初始化：

  function initialize() { map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); addMarkers(); } google.maps.event.addDomListener(window, 'load', initialize); 

向地图添加标记：

  function addMarkers() { // when the map is initialized and the points have been initialized, add them to the map if ((map != null) && (points.length > 0)) { for (var i = 0; i < points.length; i++) { var marker = new MarkerWithLabel({ map: map, position: points[i], icon: pinImage, shadow: pinShadow, labelContent: count, labelAnchor: new google.maps.Point(12, -5), labelClass: "labels" }); } } }