文章/答案/技术大牛

发布

社区首页 >问答首页 >如何先执行Ajax调用，得到lat/lng，然后用标记加载Google地图？

问如何先执行Ajax调用，得到lat/lng，然后用标记加载Google地图？
EN

Stack Overflow用户

提问于 2013-10-29 18:41:03

回答 1查看 4.1K关注 0票数 4

我正在执行ajax调用，以检索存储在sql数据库中的存储位置的lat和lng。这是我的ajax调用，并返回所有lats和is的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调用将在稍后执行，因此points数组永远不会填充。如何强制ajax调用首先获取lat和lng，然后填充点数组，然后用点数组中的标记信息加载地图。

jquery

ajax

json

google-maps

latitude-longitude

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-10-30 03:21:06

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

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

一种选择是创建一个函数，在初始化映射后显示标记，在地图初始化和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"
          });
       }
    }
 }

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19666593

复制

相似问题

问如何先执行Ajax调用，得到lat/lng，然后用标记加载Google地图？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何先执行Ajax调用，得到lat/lng，然后用标记加载Google地图？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何先执行Ajax调用，得到lat/lng，然后用标记加载Google地图？
EN