如何修复 Uncaught TypeError: mapster is not a function？

Question

我正在做地图选择并且我正在使用 mapster 但是当我运行时我收到这个错误

// 区域名称与要为每个区域显示的文本的交叉引用 var xref = { Flamborough: 'Flamborough, OntarioPopulation: 22,333', Dundas: 'Dundus, OntarioPopulation: 24,702', Acanster: 'Ancaster, OntarioPopulation: 33,000', Glanbrook: 'Glanbrook, OntarioPopulation: 77,774', StoneyCreek: 'Stoney Creek, OntarioPopulation: 62,292', Hamilton: 'Hamilton, OntarioPopulation: 490, 268' };

var image = $("#hamilton_map");

image.mapster(
{
    fillOpacity: 0.4,
    fillColor: "d42e16",
    stroke: true,
    strokeColor: "3320FF",
    strokeOpacity: 0.8,
    strokeWidth: 2,
    singleSelect: true,
    mapKey: 'name',
    listKey: 'name',
    onClick: function (e) {
        // update text depending on area selected
        $('#selections').html(xref[e.key]);


            areas: [
                {
                    key: "Flamborough",
                    fillColor: "EE82EE"
                },
                {
                    key: "Dundas",
                    fillColor: "EE82EE"
                },
                {
                    key: "Acanster",
                    fillColor: "EE82EE"
                },
                {
                    key: "Glanbrook",
                    fillColor: "EE82EE"
                },
                {
                    key: "Hamilton",
                    fillColor: "EE82EE"
                },
                {
                    key: "StoneyCreek",
                    fillColor: "EE82EE"
                }
            ]
    }
});

这是我所拥有的

Answer 1

我也面临同样的问题，我只是将它添加到我的 Js 函数中。

$(document).ready(function() {
$('img').mapster(initial_opts)
.mapster('set',true,'CA', {
    fill: true,
    fillColor: '00ff00'
})
.mapster('snapshot')
.mapster('rebind',basic_opts);

});

    var image = $("#hamilton_map");
    $(document).ready(function() {
    image.mapster(
    {
        fillOpacity: 0.4,
        fillColor: "d42e16",
        stroke: true,
        strokeColor: "3320FF",
        strokeOpacity: 0.8,
        strokeWidth: 2,
        singleSelect: true,
        mapKey: 'name',
        listKey: 'name',
        onClick: function (e) {
            // update text depending on area selected
            $('#selections').html(xref[e.key]);


                areas: [
                    {
                        key: "Flamborough",
                        fillColor: "EE82EE"
                    },
                    {
                        key: "Dundas",
                        fillColor: "EE82EE"
                    },
                    {
                        key: "Acanster",
                        fillColor: "EE82EE"
                    },
                    {
                        key: "Glanbrook",
                        fillColor: "EE82EE"
                    },
                    {
                        key: "Hamilton",
                        fillColor: "EE82EE"
                    },
                    {
                        key: "StoneyCreek",
                        fillColor: "EE82EE"
                    }
                ]
        }
    })
    });