如何根据ajax结果显示谷歌地图?

时间:2016-01-28 07:29:37

标签: jquery ajax

我有一个页面,我必须根据ajax成功结果显示地图和mysql结果。成功后,我会获得经纬度。基于我必须在地图上标记位置。每次搜索都会有过滤器。所以标记应该是全局数组。如何实现这个功能。另外,地图应根据搜索结果进行自动中心缩放。

  function initialize() {
    var latitude = 57.95,
        longitude = 14.65,
        radius = 8000, //how is this set up
        center = new google.maps.LatLng(latitude,longitude),
        bounds = new google.maps.Circle({center: center, radius: radius}).getBounds(),
        mapOptions = {
            center: center,
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    setMarkers(center, radius, map);
}

function setMarkers(center, radius, map) {
    var json = (function () { 
        var json = null; 
        $.ajax({ 
            'async': false, 
            'global': false, 
            'url': "js/hotels.json", 
            'dataType': "json", 
            'success': function (data) {
                 json = data; 
             }
        });
        return json;
    })

1 个答案:

答案 0 :(得分:0)

由于ajax请求是assync,因此您必须从ajax请求中设置成功函数中的标记。 因此,返回json变量将不起作用。

您可以在此处找到如何在Google地图文档中设置标记:https://developers.google.com/maps/documentation/javascript/examples/marker-simple

要根据标记缩放地图,可以使用边界框。如何执行此操作可以在此处找到:Google Map API v3 — set bounds and center