4

SQLデータベースに保存されている店舗の場所の緯度と経度を取得するためにajax呼び出しを行っています。これは私の ajax 呼び出しで、すべての緯度と経度の 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 呼び出しを強制するにはどうすればよいですか。

4

1 に答える 1

5

2 つの別個の非同期イベントがあります。

  1. ページ読み込みイベントでのマップの初期化
  2. マーカーのデータの ajax リターン

1つのオプションは、マップが初期化されたらマーカーを表示する単一の関数を作成し、マップの初期化とajax成功関数の両方で呼び出すことです。順序は関係ありません。両方が発生した場合、マーカーは地図上に表示されます。

グローバル スコープの変数:

var points = [];
var map = null;

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

初期化:

    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"
          });
       }
    }
 }
于 2013-10-30T03:21:06.037 に答える