如何使用动态地址生成谷歌地图？答案

【问题标题】：How to generate Google Map with dynamic address?如何使用动态地址生成谷歌地图？
【发布时间】：2016-01-25 04:15:36
【问题描述】：

我正在尝试使用来自 ajax 方法的动态地址构建 Google 地图。这些是代码：

Controller

var la;
var lo;

var map;

function createMap() {

    la= setLatitude();
    lo= setLongitude();
    var centerCoord = new google.maps.LatLng(la, lo); //dyanmic address through ajax
    var mapOptions = {
        zoom: 12,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('User-Map'),mapOptions);
    function sayHello(){alert('hahahhaha');}
}

function setLatitude(){

    $.ajax({
        url: 'geo-data',
        type: 'POST',
        dataType: 'JSON',
        success: function (data) {
           return  data['latitude'];
        }
    });
}

function setLongitude(){
    return 145.008062;
}

但是，它不起作用。谷歌地图总是在我从 ajax 获取坐标之前初始化地图。

有人知道为什么以及如何生成带有动态地址的谷歌地图吗？

【问题讨论】：

您是否尝试过将async: 'true' 添加到ajax 设置中？
你可以试试$(document).ajaxComplete(function() {....});代替createMap() {...}函数。

标签： javascript ajax google-maps google-maps-api-3

【解决方案1】：

从成功调用return data['latitude'];不代表会是setLatitude方法的返回值.实际上您的 setLatitude 没有任何返回值。另一方面，AJAX 请求异步运行，这意味着在调用 success 回调时，您的 createMap 方法已经被调用，undefined 作为 la 字段的值。最简单的解决方案是将 async: false 添加到您的 ajax 调用中，如下所示：

function setLatitude(){
    var result;
    $.ajax({
        url: 'geo-data',
        async: false,
        type: 'POST',
        dataType: 'JSON',
        success: function (data) {
           result = data['latitude'];
        }
    });
    return result;
}

或将方法 createMap 的调用移至 success 回调。

【讨论】：

抱歉回复晚了。它确实有效！非常感谢！