ImageMapster

Question

我正在使用插件 ImageMapster，但在使用 JavaScript 时遇到了问题。我正在尝试获取由数据库确定的状态以显示备用图像。这些状态然后 link 到同一页面上的锚点。看来我目前所拥有的只是完全打破了 JavaScript 。这是我现在拥有的代码：

<script type="application/json" id="map-data">["ID","CA"]</script>

<script>
    var data = $.parseJSON($('#map-data').text());

$('img').mapster({
    mapKey: 'state',
    clickNavigate: true,
onConfigured: function () {
        var csv = data.join(',');
        $('img').mapster('set', true, csv)
        .mapster('snapshot')
        .mapster('unbind', false);
        altImage: '../Images/map_outline_blackStrokeDot.png'
    }
});
</script>

Answer 1

我终于得到了我需要的所有要求。最终代码在这里：

<map id="idaho" name="idahomap">
    <area alt="mushroom" href="#idaho" state="ID" full="Idaho" shape="poly" coords="364,150,337,264,346,268,317,316,320,327,304,407,473,442,485,347,475,335,437,341,414,285,406,296,410,247,383,215,380,191,388,157,376,153">
</map>

<script type="application/json" id="map-data">["ID","CA"]</script>

<script>
    var data = $.parseJSON($('#map-data').text());


    $('img').mapster({
        mapKey: 'state',
        clickNavigate: true,
        isSelectable: false,
        highlight: false,
        onConfigured: function () {

            // make the array into a comma-sparated list
            var csv = data.join(',');

            // the 'set' activates the areas
            $('img').mapster('set', true, csv, options = { fillColor:'ffffff' });
        }
    });
</script>

ImageMapster - 从数据库中预选状态；页面内的锚 link

ImageMapster - Preselect states from a db; anchor link within the page

database