如何先执行Ajax调用来获取纬度/液化天然气，然后加载谷歌地图与标志？

问题描述

我做的Ajax调用来检索存储在SQL数据库存储位置的纬度和经度。这是我的ajax调用和返回所有拉特和LNGS的JSON对象。

I am doing an ajax call to retrieve the lat and lng of stores locations stored in sql database. This is my ajax call and returns the json object of all lats and lngs.

$.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对象将用于在地图上添加标记。这都是在这里完成的地图加载之前。

Now I have stored this json object in my own array object that will be used to add markers on map. This is done here before the map is loaded.

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

我的问题是，该地图被装载在窗口负载（如在code最后一行看到的），但我的Ajax调用后进行的，所以点阵列从来没有填充。我怎么可以强制Ajax调用率先拿到了LAT和液化天然气和填充点的数组，然后加载地图从点阵列标记信息。

My problem is that the map is loaded on window load (as seen in last line of code) but my ajax call is performed later, so points array never populates.How can I force the ajax call to get first the lat and lng and populate the points array and then Load map with the markers info from the points array.

推荐答案

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

You have two separate asynchronous events:

1. 在页面加载事件映射initializtion
2. 在AJAX返回数据的标记

一个选项是建立一个单一的功能，显示一旦地图初始化标记，在地图的初始化和阿贾克斯成功函数的结束称之为两者，则顺序无关紧要，当两者发生的标记物将被显示在地图上。

one option is to create a single function that displays the markers once the map is initialized, call it both at the end of the map initialization and the ajax success function, then the order doesn't matter, when both have occurred the markers will be displayed on the map.

在全球范围内的变量：

var points = [];
var map = null;

AJAX：

AJAX:

$.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();
        }
       });

初​​始化：

initialization:

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

添加标记到地图：

add markers to the map:

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

这篇关于如何先执行Ajax调用来获取纬度/液化天然气，然后加载谷歌地图与标志？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！