javascript - 如何为 ImageMapster 创建 PHP 生成的工具提示？

Question

我正在为我的公司绘制平面图，看看每个员工的办公 table 在哪里，所以如果你想拜访某人，你可以很容易地事先找到他。

我创建了一个 <map>有很多 <area> s，现在我正在使用 ImageMapster突出显示表格并在工具提示中显示有关员工的一些信息(照片、姓名、职位等(小名片))。

而且因为手动更改areas确实不是最优的在 mapster 初始化中，我想通过 PHP 加载工具提示的标题。

到目前为止我已经做到了:

<div class="mapster-map">
    <img src="images/floor_2.png" border="0" width="1300" height="1300" usemap="map_floor_2" alt="" />
    <map name="map_floor_2" id="ImageMap-map_floor_2">
        <?php
            $found = array();
            foreach ($tables as $t) {
                $user = $map->getSeatedEmployee($t['id']);
                if (!empty($user)) {
                    $found[] = array('key'=>$t['id'], 'toolTip'=>$user['jmeno'] . ' ' . $user['prijmeni']);
                }
                echo '<area id="' . $t['id'] . '" coords="' . $t['coords'] . '" shape="' . $t['shape'] . '" alt=""
                title="' . (!empty($user) ? $user['name'] . ' ' . $user['surname'] : '') . '" href="' . (!empty($user) ? 'user_detail.php?id=' . $user['id'] : '#') . '" />';
            }
            $found = json_encode($found);
        ?>
    </map>
</div>
<script>
    $('img[usemap]').mapster({
        mapKey: 'id',
        fillColor: 'EE1C23',
        fillOpacity: 0.65,
        showToolTip: true,
        areas:[<?php echo $found ?>]
    });
</script>

所以结果 <area>看起来像这样

<area id="2-13-2" href="user_detail.php?id=1" title="Adam Jones" alt="" shape="rect" coords="274,269,356,337">
<area id="2-13-4" href="user_detail.php?id=2" title="Bon Jovi" alt="" shape="rect" coords="189,269,271,337">
<area id="2-13-6" href="user_detail.php?id=3" title="Charles Copperfield" alt="" shape="rect" coords="104,269,186,337">
<area id="2-13-8" href="#" title="" alt="" shape="rect" coords="013,269,081,353">
<area id="2-13-1" href="user_detail.php?id=4" title="Christina Davis" alt="" shape="rect" coords="274,390,356,458">

但是工具提示没有显示，并且在控制台中没有错误。在 Firebug 中 <script>看起来像这样:

$('img[usemap]').mapster({
    mapKey: 'id',
    fillColor: 'EE1C23',
    fillOpacity: 0.65,
    showToolTip: true,
    areas:[[{"key":"2-13-2","toolTip":"Adam Jones"},{"key":"2-13-1","toolTip":"Bon Jovi"},{"key":"2-13-1","toolTip":"Charles Copperfield"},{"key":"2-13-1","toolTip":"Christina Davis"}]]
}); 

我无可救药地坚持这一点，希望有人知道如何使这项工作成功。

Answer 1

在你的 JavaScript 中，areas 应该只有一个括号 areas:[...] 而不是两个嵌套的 areas:[[...]] 。根据文档here .所以我们只需要去掉那些额外的括号:

$('img[usemap]').mapster({
    ... ,
    areas:[{"key":"2-13-2","toolTip":"Adam Jones"},{"key":"2-13-1","toolTip":"Bon Jovi"},{"key":"2-13-1","toolTip":"Charles Copperfield"},{"key":"2-13-1","toolTip":"Christina Davis"}]
}); 

我们可以通过在此处的 JavaScript 中删除它们来做到这一点:

areas:[<?php echo $found ?>]

到

areas: <?php echo $found ?>

因为 $found 是一个数组，所以它有所需的括号。