javascript - JQuery 函数不打印任何内容

Question

我试图让它工作这个 jquery 函数，但没有任何结果。就这个。它从 setmap(一个 servlet)接收一个 json 格式的列表。我完全确定我得到了列表，但不幸的是我没有看到 map 出现在屏幕上。

$(document).ready(function(){

    $("#airports").click(function(){

        $.getJSON('setmap', function(list) {       

            var mapOptions = {
                zoom: 2,
                mapTypeId: new google.maps.MapTypeId.TERRAIN
            };

            $('.grid_12').append($("<div id='mapCanvas'></div>"));

            var map = new google.maps.Map(mapCanvas, mapOptions);  

            if(list.length > 0)
            {
                for (var i = 0; i < list.length; i++) 
                {
                    var latLng = new google.maps.LatLng(list[i].latitude,list[i].longitude);
                    var marker = new google.maps.Marker({
                        position: latLng,
                        map: map
                    });
                }    
            } 

        });

    });
});

HTML

<article>
  <section class="grid_12"></section>
</article>

Answer 1

在这一行中:

var map = new google.maps.Map(mapCanvas, mapOptions); 

mapCanvas 未定义。它可能在某些浏览器中隐式工作，因为某些浏览器将为每个 ID 定义一个符号，但您确实不应该依赖它。我假设你想在那里传递 DOM 元素(这就是谷歌地图想要的)，所以你可以像这样更明确地做到这一点:

var mapCanvas = ($("<div id='mapCanvas'></div>").appendTo('.grid_12'))[0];
var map = new google.maps.Map(mapCanvas, mapOptions); 

由于您没有提供可运行的演示，因此可能还有其他错误。