javascript - jquery 和 google map api 的范围

Question

我正在初始化一些谷歌地图，其中大量数据是通过ajax和标识符发送的，但我遇到了一个奇怪的范围问题(或者我认为是这样)。

我的初始化调用是...

$(".dataMap").each(function(i, obj){
var mapID = $(this).attr('mapID');
if(mapID !== "undefined"){
    var mapBox = $(this);
    var mapBoxID = $(this).attr('id');
    //get our data
    var jsonp_url = "url-removed-for-security";
    $.getJSON(jsonp_url, function(data){
        //now we start creating our map.
        //first, lets work on sizing.
        var myOptions = {
            zoom: 11,
            center: new google.maps.LatLng(42.351391443036654, -83.09239196777344),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById(mapBoxID), myOptions);
    }); // end of json call
}

});

这条线有效

map = new google.maps.Map(document.getElementById(mapBoxID), myOptions);

但是如果我把它改成这样......

map = new google.maps.Map(mapBox, myOptions);

它抛出错误:未捕获“TypeError:无法设置未定义的属性'位置'”

我不明白为什么传递对象失败。这不等同于 document.getElementById 吗？如果不是，那会是什么？它显然能够检测到我正在使用的 div，因为工作示例有效，哈哈。它能够从 $(this) 引用中获取 divID。我对这个问题很困惑。

Answer 1

var mapBox = $(this);

mapBox 是一个 jQuery 对象。您需要的是一个 DOM 元素。您可以通过以下方式获得:

var mapBox = $(this)[0];

还有其他方法，但这应该可行。