这并不难，但有几点需要注意。工作示例在这里：
http://jsfiddle.net/gCTcF/
更新：原始示例仅适用于一种方式，此示例适用于两种方式，最后讨论。
http://jsfiddle.net/UrNsH/
1）您不能将两个图像绑定到同一个图像映射，因为 ImageMapster 将区域视为唯一标识符。所以只需制作一个副本并将第二个图像绑定到副本：
var map = $('map[name="map"]'),
clone = map.clone().attr('name', 'map2'),
image2 = $('#map_mini');
map.after(clone);
image2.attr('usemap', '#map2');
2) 你的方向是对的，你需要用来stateChange同步地图。从该事件发送的数据并不能完全转换为您需要在另一个地图上调用的代码，因此请使用一些逻辑来根据事件进行正确的调用：
function state_change(data) {
if (data.state=='highlight')
{
// add or remove a highlight to the alternate image. the syntax to add vs.
// remove a highlight is a little different (you don't need to specify where
// you're removing - there can be only one highlight) so easiest to use two
// different statements for add vs. remove.
if (data.selected) {
image2.mapster('highlight',data.key,true);
} else {
image2.mapster('highlight',false);
}
} else if (data.state=='select') {
// add or remove the "selected" state to the alternate image.
// the syntax is the same to add and remove (unlike highlight) so you
// just need one statement.
image2.mapster('set',
data.selected,
data.key);
}
}
3) 创建两个地图将共享的选项的变量，并使用stateChange控制另一个地图的事件扩展它。这将进行单向同步。如果您希望它以两种方式同步，则需要复制 stateChange 函数，或者添加一个参数，以便它知道应该对哪个映射进行操作。（如果您只是将两个映射绑定到同一个事件，则在从它所针对的同一个映射执行操作时会导致无限循环）。
var options = {
singleSelect: true,
isDeselectable: false,
fill: true,
fillColor: 'ff0000',
fillOpacity: 0.5
};
$('#map_mini').mapster(options);
$("#map_full").mapster(
$.extend({}, options, {
onStateChange: state_change
}));
希望有帮助。
更新：
为了让它像您发现的那样双向工作，您必须防止递归。
更新示例：http: //jsfiddle.net/UrNsH/
首先，在开头创建对两个图像的引用：
var image1 = $('#map_full'),image2 = $('#map_mini');
在state_change函数中，使用一个标志来表示代码当前处于改变状态的过程中。这样，当state_change由于它自己的动作而再次触发时，它将知道不会启动另一个事件。这非常简单：在函数外部创建一个变量以用作标志。您要做的第一件事是检查您当前是否正在“改变”，如果是，请退出。如果不是，请在开始对第二张图像执行操作之前将“更改”标记为真。
现在发生的另一件事是您需要弄清楚要对哪个图像采取行动。这个逻辑很简单：它不是鼠标事件的来源。您只需要检查this哪个是图像本身并选择不是的图像this。
你会注意到我在this比较image1[0]. 这是 jQuery 经常出现的问题。this是一个实际的 DOM 元素，而image1和image2是 jQuery 对象。jQuery 对象是类数组的。因此，要访问作为选择器一部分的实际 DOM 元素，您必须使用索引。image1[0]是 的第一个（也是唯一的）成员，并且当第一张图像是事件源时image1将匹配。this
var changing = false;
function state_change(data) {
// prevent recursion: exit if already inside this function
if (changing) return;
// set the flag that work is in progress so if something calls this while
// we're busy syncing, it won't try to start again (creating endless recursion)
changing = true;
// switch the image that's not this one.
var target = this===image1[0] ?
image2 :
image1;
// this part is the same as before
if (data.state=='highlight'){
if (data.selected) {
target.mapster('highlight',data.key,true);
} else {
target.mapster('highlight',false);
}
} else if (data.state=='select') {
target.mapster('set', data.selected, data.key);
}
changing=false;
}
应该这样做！