0

我正在尝试将谷歌地图加载到 div 中。因为我有不确定数量的这些 DIV，每个 DIV 都必须加载一个独立的地图，所以我想对 DIV 类进行 jQuery 搜索，然后更改找到的元素的 ID 以使其唯一。这工作正常。但是，当我尝试将地图加载到每个 DIV 中时，它无法加载。这是我的代码：

function gmapEditor(mapobj) {

    var mapdivid = jQuery(mapobj).attr("id");
    var mapopts = {
        center: new google.maps.LatLng(51.520707, -0.006866),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        zoomControl: false,
        panControl: false,
        streetViewControl: false,
        labels: true
    };

    initmap();

    console.log(mapdivid); // -> 'ell-gmap-kml-mapdiv-11740'
    console.log(mapobj);

    function initmap() {
        //jQuery(mapdivid)[0]
        gmap = new google.maps.Map(document.getElementById(mapdivid), mapopts);
        //gmap = new google.maps.Map(mapobj[0], mapopts);
        mapcenter = gmap.getCenter();
    }
}
jQuery(document).ready(function () {

    // Create array to hold map editor instances
    var maps = new Array();

    jQuery(".ell-gmap-kml-mapdiv").each(function (i) {
        // Add prefix to map div ID
        var newid = jQuery(this).attr("id") + '-' + jQuery(this).data("post_id");
        jQuery(this).attr("id", newid);

        // Instantiate new map editor object and add to array
        maps[i] = new gmapEditor(jQuery(this));
    });
});

（不知道为什么代码格式搞砸了）。如您所见，我正在为每个 DIV 创建一个独立的“gmapEditor”对象实例，该 DIV 具有 jQuery 找到的“ell-gmap-kml-mapdiv”类。

如果我注释掉更改地图 DIV 的 ID 的代码，地图就会加载。问题是，由于每个 DIV 不再有唯一的 ID，所有地图都将具有相同的设置。

我添加了几个控制台转储。重新启用 ID 更改代码后，我得到了“mapdivid”的预期值。有趣的是，我还从日志中看到，已将大量子元素添加到 mapobj DIV 中，因此某处正在工作。Maps API 并非完全无法获取地图 DIV 的句柄，但它也无法在那里显示任何内容。如果我在 Safari 中执行“检查元素”，我什至可以看到这些额外的元素，但在实际页面上，地图是不可见的。

任何人都知道可能出了什么问题，如果可能的话，我该如何解决？也许我完全走错了路……

顺便说一句，我在 Mac 上的 Safari、FireFox 和 Chrome 中尝试过这个，每次都得到相同的结果。

非常感谢任何建议。

编辑：

工作中。我不知道为什么它以前不起作用，但这是工作代码：

function gmapEditor(mapobj) {

var mapdivid = jQuery(mapobj).attr("id");   
var mapopts = {
        center: new google.maps.LatLng(51.520707, -0.006866),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        zoomControl: false,
        panControl: false,
        streetViewControl: false,
        labels: true
};

initmap();

console.log(mapdivid);
console.log(mapobj);

function initmap() {
    gmap = new google.maps.Map(mapobj[0], mapopts); 
    mapcenter = gmap.getCenter();
}   
}

jQuery(document).ready(function() {

// Create array to hold map editor instances
var maps = new Array();

jQuery(".ell-gmap-kml-mapdiv").each(function(i) {
    // Add suffix to map div ID
    //var postid = jQuery(this).data("post_id");
    //var newid = jQuery(this).attr("id") + '-' + jQuery(this).data("post_id");
    var newid = jQuery(this).attr("id") + '-' + i;
    jQuery(this).attr("id", newid);

    // Instantiate new map editor object and add to array
    maps[i] = new gmapEditor(jQuery(this));
});
});

我决定简单地在 ID 上添加一个索引，而不是像以前那样使用元素的数据属性，但我也能够让它以这种方式工作。

4

0 回答 0