javascript - 取决于类别名称的不同样式的多个 map

一页内有9张地图。我目前有九个功能和九个单击事件。这似乎太过膨胀了，所以我试图使代码更具动态性。在这个过程中，我碰到了砖墙。我写了一些代码，这些代码原则上应该可以工作。但是我不知道的原因，它不会加载地图

具有9个功能和9个单击事件的DEMO http://jsfiddle.net/x8dSP/2074/

DEMO尝试优化http://jsfiddle.net/x8dSP/2076/

function mapOneInitialize() {
    var mapId = $(this).attr('id');
    var map;
    if ($(mapId).hasClass("partnerName1")) {
        var thisLatLang = new google.maps.LatLng(40.747688, -74.004142);
    } else if ($(mapId).hasClass("partnerName2")) {
        var thisLatLang = new google.maps.LatLng(40.747688, -74.004142);
    } else if ($(mapId).hasClass("partnerName3")) {
        var thisLatLang = new google.maps.LatLng(40.747688, -74.004142);
    } else if ($(mapId).hasClass("partnerName4")) {
        var thisLatLang = new google.maps.LatLng(40.747688, -74.004142);
    } else if ($(mapId).hasClass("partnerName5")) {
        var thisLatLang = new google.maps.LatLng(40.747688, -74.004142);
    } else if ($(mapId).hasClass("partnerName6")) {
        var thisLatLang = new google.maps.LatLng(40.747688, -74.004142);
    } else if ($(mapId).hasClass("partnerName7")) {
        var thisLatLang = new google.maps.LatLng(40.747688, -74.004142);
    } else if ($(mapId).hasClass("partnerName8")) {
        var thisLatLang = new google.maps.LatLng(40.747688, -74.004142);
    } else if ($(mapId).hasClass("partnerName9")) {
        var thisLatLang = new google.maps.LatLng(40.747688, -74.004142);
    }
    var centerPosition = thisLatLang;

    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($(mapId)[0], options);
};

$('.map').click(function () {
    mapOneInitialize();
});

最佳答案

有几个问题：

首先，var mapId = $(this).attr('id');不会获取地图ID。要更正此问题，您应该像这样将this传递给mapOneInitialize函数：

$('.map').click(function () {
  mapOneInitialize(this);
});

function mapOneInitialize(el) {
  var mapId = $(el).attr('id');
...

其次，使用mapId的jQuery选择器不正确。它们应更改为$('#' + mapId)。

Fiddle。