javascript - 根据类名，具有不同纬度的多个 map

Question

我在一页内有 9 张 map 。我目前有九个函数和九个点击事件。这看起来太臃肿了，所以我试图让我的代码更加动态。在这个过程中我碰壁了。我写了一些代码，原则上应该可以工作。但我不知道原因，它不会加载 map

具有九个函数和 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();
});

Answer 1

我必须将 map 变量设置为全局数组，并添加 3 个自定义数据属性 data-no,data-lat,data-long 以便轻松访问 div。

 var map = [];

和 html

<div id="map" class="map map1" data-no="1"></div>

我已经更新了你的 fiddle here