如何在拉斐尔/马帕尔地图上的绘图旁边对齐工具提示

Question

我正在尝试在拉斐尔/马帕尔地图上对齐工具提示。 目前，它们默认位于地图的左下角，但希望它们会显示在悬停的地块附近。

我在这里创建了一个 jsbin。

http://jsbin.com/pogaqecuwa/edit?html,js,output

我还想在绘图中添加一个 href 链接。 如果是这样，我可以在每个绘图中包含链接还是需要捕获事件处理程序？

function initMap() {
var $map = $('#map'),
state;
$map.mapael({
map: {
name: "usa_states",
},

plots: {
'ny': {
latitude: 40.717079,
longitude: -74.00116,
tooltip: {content: "New York",
offset: {
left:3000,
top:1000
}
}
},
'on': {
latitude: 33.145235,
longitude: -83.811834,
size: 18,
tooltip: {content: "Oconee National Forest"}
},
'sf': {
latitude: 37.792032,
longitude: -122.394613,
size: 12,
tooltip: {content: "San Francisco"}
},
'la': {
latitude: 26.935080,
longitude: -80.851766,
size: 26,
tooltip: {content: "Lake Okeechobee"}
},
'gc': {
latitude: 36.331308,
longitude: -83.336050,
size: 10,
tooltip: {content: "Grainger County"}
},
'cc': {
latitude: 36.269356,
longitude: -76.587477,
size: 22,
tooltip: {content: "Chowan County"}
},
'll': {
latitude: 30.700644,
longitude: -95.145249,
tooltip: {content: "Lake Livingston"}
},
'tc': {
latitude: 34.546708,
longitude: -90.211471,
size: 14,
tooltip: {content: "Tunica County"}
},
'lc': {
latitude: 32.628599,
longitude: -103.675115,
tooltip: {content: "Lea County"}
},
'uc': {
latitude: 40.456692,
longitude: -83.522688,
size: 11,
tooltip: {content: "Union County"}
},
'lm': {
latitude: 33.844630,
longitude: -118.157483,
tooltip: {content: "Lakewood Mutual"}
}
}
});
}
//ie svg height fix
function _fixMapHeight() {
$map.find('svg').css('height', function () {
return $(this).attr('height') + 'px';
});
}

$(function () {
initMap();
});  

Answer 1

实际上，Mapael提供了一个示例，向您展示如何执行所需的操作。

如果将鼠标悬停在雷恩，您将看到工具提示。

如果你点击雷恩，你会被带到维基百科页面。

---

使用工具提示时，您需要实际添加一些 CSS。

通常，使用这个：

.mapael .mapTooltip {
position: absolute;
background-color: #474c4b;
moz-opacity: 0.70;
opacity: 0.70;
filter: alpha(opacity=70);
border-radius: 10px;
padding: 10px;
z-index: 1000;
max-width: 200px;
display: none;
color: #fff;
}

但是，只有位置和显示属性是必需的，才能具有功能工具提示。

关于href链接，Mapael确实支持它！区域、绘图或链接可以具有 href 选项(如果需要，还可以使用目标选项(。

根据文档：

defaultArea / defaultPlot / defaultLink : (Object) Default options for all areas, plotted points or curved links of the map. 
...
href : (String) Href for the elements.
target : (String) Target of the href for the elements (it can be set to a regular HTML target such as _blank, _self, ...).

---

作为旁注，我不禁注意到在您的 JSBin 示例中，您使用的是 Mapael v0.7.1。我强烈建议您更新到最新的2.1.0。