如何在 Google maps v3 API 上异步添加标记？答案

【问题标题】：How to add Markers on Google maps v3 API asynchronously?如何在 Google maps v3 API 上异步添加标记？
【发布时间】：2013-03-06 07:09:38
【问题描述】：

到目前为止，我一直在关注地图上的official documentation on how to add markers

不过，我一次最多只能看到一个标记。如果我尝试添加另一个，那么它不起作用（我什至看不到第一个）。我的流程如下：

我初始化 gmaps api：

    jQuery(window).ready(function(){ 
        //If we click on Find me Lakes
        jQuery("#btnInit").click(initiate_geolocation);
    });

    function initiate_geolocation() {  
        if (navigator.geolocation)  
        {  
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBbfJJVh0jL1X9b7XFDcPuV7nHD1HlfsKs&sensor=true&callback=initialize";
            document.body.appendChild(script);

            navigator.geolocation.getCurrentPosition(handle_geolocation_query, handle_errors);
        }  
        else  
        {  
            yqlgeo.get('visitor', normalize_yql_response);
        }  
    }

然后，我将它显示在适当的 div 上。但是在进行 AJAX 调用时，为了获取我想要显示的不同标记的位置，它无法正常工作。这是显示一个简单地图的代码（因为这是迄今为止唯一对我有用的东西）。

    function handle_geolocation_query(position){ 

        var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            mapTypeId: google.maps.MapTypeId.SATELLITE
          }

        alert('Lat: ' + position.coords.latitude + ' ' +  
              'Lon: ' + position.coords.longitude);

        $('#map-canvas').slideToggle('slow', function(){
            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        });

        $.when( getLakes(position.coords.latitude, position.coords.longitude)).done(function(results) {
            // InitializeGoogleMaps(results);
            if(results)
            var data = results.map(function (lake) {
                //Check if the lake has any open swims, if not, the button will not be clickable and an alert will pop up
                if (lake.available>0)
                    clickable=true;
                else
                    clickable=false;

                    return {
                        name: lake.name,
                        fishs: lake.fisheryType,
                        swims: lake.swims,
                        dist: lake.distance,
                        lat: lake.latitude,
                        long: lake.longitude,
                        id: lake.id,
                        avail: lake.available,
                        clickable: clickable,
                        route: Routing.generate('lake_display', { id:  lake.id, lat: position.coords.latitude, lng: position.coords.longitude})
                    }
                });

            var template = Handlebars.compile( $('#template').html() );
            $('#list').append( template(data) );


        } );
    };

所以我想在 AJAX 调用之后添加标记。我已经设置了一个应该在 when() 中调用的函数

function InitializeGoogleMaps(results) {

};

在 foreach 循环中显示标记，但不行，不能让它工作。它看起来像这样：

CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
marker = new google.maps.Marker({
    position: location,
    map: map
});

任何帮助都会很棒！

谢谢

【问题讨论】：

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

【解决方案1】：

主要问题是map 变量仅在slideToggle 上的匿名回调范围内声明。首先声明在顶级函数作用域。

function handle_geolocation_query(position){ 

    var map,
        mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            mapTypeId: google.maps.MapTypeId.SATELLITE
        }
    ...

然后将slideToggle回调改为初始化变量而不是重新声明：

$('#map-canvas').slideToggle('slow', function(){
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
});

然后您应该将map 作为第二个参数传递给您的InitializeGoogleMaps 函数并使用InitializeGoogleMaps(results, map) 调用它。看看这对你有什么好处，如有任何问题，请回复我。

【讨论】：