Question

我正在尝试将Google地图加载到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));
    });
});

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

如果我注释掉更改地图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上添加一个索引，而不是像以前那样使用元素的数据属性，但我也能够以这种方式工作。

使用jQuery更改元素ID后无法加载Google Map

0 个答案: