Javascript 如何使用imagemap写入区域的文本中心？

我使用map和area attr，并使用maphighlight.js（即jquery）为它们设置样式。当我悬停时，它会显示边框和颜色填充等

现在我想把文本放在每个区域的中心，这些区域由坐标确定。当页面加载时，我希望看到区域中心的文本“无悬停”，悬停后我希望看到边框、颜色等。感谢您的帮助。 这是我的密码。1） 马普莱特

 $(document).ready(function(){
    $('.map').maphilight();
});

2） 我试着写文本，但没有正常工作

    $(function() {

    $('area').each(function(){
        var txt=$(this).data('name');
        var coor=$(this).attr('coords');
        var coorA=coor.split(',');
        var left=coorA[0];
        var top=coorA[1];

        var $span=$('<span class="map_title">'+txt+'</span>');        
        $span.css({top: top+'px', left: left+'px', position:'absolute'});
        $span.appendTo('.content');
    }) 
})

---

首先，我使用了我自己的形象

coords=“588271816369”

的工作原理：

• 这里是x1，y1，x2，y2，其中x1，y1表示区域的左上角，x2，y2表示区域的右下角
• 第二件事是，您需要将这些cordinate解析为整数，以计算文本的上/左属性
• 现在，您可以使用此公式计算左属性

  parseInt（coorA[0]）+（（parseInt（coorA[2]）-parseInt（coorA[0]））/2）

  。上面也是一样

请注意，这里我计算的点是

rect

的精确中心，但它显示在右侧，因为它是从精确的中心点开始的。你可以运用更多的数学知识使它精确地对准中心

编辑

您可以计算跨度的宽度并获得其宽度。在那之后，除以2将得到你需要减去的像素，以使你的标签准确地位于中心。在这里，我假设边界中使用了一些像素，因此我将返回9个像素作为调整。如果您觉得它工作正常，可以将其移除

$（函数（）{
$（'.map'）.maphilight（）；
$（'area'）。每个（函数（）{
var txt=$（this.data（'name'）；
var coor=$（this.attr（'coords'）；
var coorA=coor.split（'，'）；
var left=parseInt（coorA[0]）+（（parseInt（coorA[2]）-parseInt（coorA[0]））/2）；
var top=parseInt（coorA[1]）+（（parseInt（coorA[3]）-parseInt（coorA[1]））/2）
变量$span=$（''+txt+''）；
$span.css（{top:top+'px'，left:left+'px'，position:'absolute'}）；
$span.appendTo（'.content'）；
$span.css（{left:（left Math.ceil（$span.width（）/2）+9）+'px'}）
}) 
});
#地图{
职位：相对
}
首先，我使用了自己的图像

coords=“588271816369”
的工作原理：


这里是x1，y1，x2，y2，其中x1，y1表示区域的左上角，x2，y2表示区域的右下角
第二件事是，您需要将这些cordinate解析为整数，以计算文本的上/左属性
现在，您可以使用此公式计算左属性
parseInt（coorA[0]）+（（parseInt（coorA[2]）-parseInt（coorA[0]））/2）
。上面也是一样

请注意，这里我计算的点是
rect
的精确中心，但它显示在右侧，因为它是从精确的中心点开始的。你可以运用更多的数学知识使它精确地对准中心

编辑

您可以计算跨度的宽度并获得其宽度。在那之后，除以2将得到你需要减去的像素，以使你的标签准确地位于中心。在这里，我假设边界中使用了一些像素，因此我将返回9个像素作为调整。如果您觉得它工作正常，可以将其移除


$（函数（）{
$（'.map'）.maphilight（）；
$（'area'）。每个（函数（）{
var txt=$（this.data（'name'）；
var coor=$（this.attr（'coords'）；
var coorA=coor.split（'，'）；
var left=parseInt（coorA[0]）+（（parseInt（coorA[2]）-parseInt（coorA[0]））/2）；
var top=parseInt（coorA[1]）+（（parseInt（coorA[3]）-parseInt（coorA[1]））/2）
变量$span=$（''+txt+''）；
$span.css（{top:top+'px'，left:left+'px'，position:'absolute'}）；
$span.appendTo（'.content'）；
$span.css（{left:（left Math.ceil（$span.width（）/2）+9）+'px'}）
}) 
});
#地图{
职位：相对
}

因此，您的文本如“Daire1”、“Daire3”等已经出现，您将在悬停时获得边框/颜色。那么你只想把它们对准中心吗？@MayankPatel是的，没错。文本显示在左角，但我无法将它们对齐到中心。文本对齐：中心对我不起作用。请检查我的答案。因此，您的文本如“Daire1”、“Daire3”等已经出现，并且您在悬停时获得边框/颜色。那么你只想把它们对准中心吗？@MayankPatel是的，没错。文本显示在左角，但我无法将它们对齐到中心。文本对齐：中心对我无效。请检查我的答案。
<div class="content">

<img src="ozak.jpg" alt="" class="map" width="2000" height="2000" border="0" usemap="#demo">
</div>
<map name="demo">
     <area  id="51" alt="D1" class ="tooltip" title="3+1 150 m² Deniz Manzaralı " href="javascript: alert('Daire 5127 Satılmıştır!')" coords="588,271,816,369" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire1">
    <area  alt="" title="" href="javascript: alert('Daire 5287 Satılıktır!')" coords="1251,278,1374,367" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"00BD06","fillOpacity":0.7}' data-name="Daire2">
  <area alt="" title="" href="javascript: alert('Daire 8692 Satılmıştır!')" coords="600,469,807,554" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire3">


</map>

#map {
    position:relative
}
.map_title {
    position:absolute;    
}