javascript - 使用变量动态更改谷歌地图javascript api

Question

1. 我有一个 json 对象，它为我提供用户的纬度和经度坐标。我想使用这些坐标向用户显示他们在 Google map 上的位置。

2. 我将这些值保存在两个变量中并将它们插入谷歌地图 API 脚本中，但 map 没有显示。变量确实需要一点时间才能显示出来，但我尝试将 google map 脚本包装在 setTimeout 函数中，但没有成功。

有什么方法可以做到这一点，而不必让用户单击按钮手动加载 map ？

    $(document).ready(function() {
        var userLat;
        var userLng;

        $.getJSON("http://www.sample.com/callback=?",
            function(json) {
                console.log(json);              
                userLat = (json.latitude);
                userLng = (json.longitude);
            }
        )
    })

    function initialize() {
        var mapOptions = {
            center: { lat: userLat, lng: userLng},
            zoom: 8,
            scrollwheel: false
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

您正在从服务器返回 json 之前初始化 map 。在您的 $.getJSON 中，您应该在回调中重置 map 的中心。您还应该确保谷歌可以读取您的纬度和经度点。 - 类似于:

$.getJSON("http://www.sample.com/callback=?",
            function(json) {
                console.log(json);              
                userLat = (json.latitude);
                userLng = (json.longitude);
                var newPos = new google.maps.LatLng(userLat, userLng);
                map.setOptions({
                    center: newPos
                });
            }
        )

您还必须创建一个标记来显示用户位置。此外，您还应该在初始化函数之外创建映射变量，以便其他函数可以使用它。