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

Question

我正在做一个 ajax 调用来检索存储在 sql 数据库中的商店位置的纬度和经度。这是我的 ajax 调用并返回所有 lats 和 lngs 的 json 对象。

$.ajax({
        type:"GET",
        dataType:"json",
        url:"<?php echo site_url("sandbox_faizan/get_coordinates") ?>",
        success: function(result)
        {
            my_arr = result;

          for(var i=0;i<result.length;i++)
           {
               store_points(result[i].lat,result[i].lng)
           }
    });

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

<script type="text/javascript">
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 并填充点数组，然后使用点数组中的标记信息加载地图。

Answer 1

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

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

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

全局范围内的变量：

var points = [];
var map = null;

阿贾克斯：

$.ajax({
        type:"GET",
        dataType:"json",
        url:"<?php echo site_url("sandbox_faizan/get_coordinates") ?>",
        success: function(result) 
        {
          for(var i=0;i<result.length;i++) 
          {
            points.push(new google.maps.LatLng(result[i].lat,result[i].lng));
          }
          addMarkers();
        }
       });

初始化：

    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"
          });
       }
    }
 }