javascript - 具有多个多边形的自定义图像 map - 添加了 map 图标

Question

我有一个图像 map - 有 20 个使用多边形制作的可点击标记点。

我想为每个多边形添加一个标记图标中心，如果可能的话，当激活(单击)时更改颜色可以使用 SVG 或 .png 作为 Pin。

单击时，它们会向 URL 添加 #1、#2 等 - 用于在页面上填充包含联系信息的文本区域。

使用 foreach 语句将每个区域添加到 map 。

尝试使用“符号”，但无法在每个多边形内居中。

<svg id="svgmap<?= $bID; ?>" version="1.1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;top:0;left:0;" viewBox="0 0 <?= $width; ?> <?= $height; ?>"  >
<defs>
<symbol id="pin" viewBox='0 0 24 24'><title>location on</title>
    <path d='M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'></path>
    <path d='M0 0h24v24h-24z' fill='none'></path>
</symbol>
</defs>

 <?php  
foreach($areas as $area) {
        $points = trim($area['mapdata']);
$url = $sec->sanitizeURL($area['linked_url']);
 ?>
<a class="arrow" id="pin" xlink:href="<?= $url; ?>" xlink:title="<?=  $title; ?>" <?= ($area['newWindow'] && !($area['forceDownload'] && $area['type'] == 'file') ? 'target="_blank"' : '')?>>
<g id="my-group">
<use xlink:href="#pin" x="" y="" width="30px" height="30px" />
<polygon points="<?= $points; ?>" fill="url(#img1)" filter="url(#sparklin)" opacity="1" />  
</g>
 </a> 

}

在 map 的左上角显示所有图标。不以每个部分为中心。

更新

---

好的，使用下面的解决方案:我在我的循环之上创建了以下函数，但是我遇到了一个错误“未捕获的类型错误:poly.getBBox 不是一个函数 在我的职能部门(联系人:508) 在联系人:566"

[代码]

<script>
                        function myfunction(){
                        // the bounding box of the polygon
                            var BB = null;
                            var BB = poly.getBBox();
                            // the center of the polygon
                            var center = {x:BB.x + BB.width/2,
                                          y:BB.y + BB.height/2}
                            //the size of the symbol
                            var symbol = {w:30,h:30}
            // set the values for the x and y attributes of the symbol
        theUse.setAttributeNS(null, "x",center.x - symbol.w/2)
        theUse.setAttributeNS(null, "y",center.y - symbol.h)
                        };
                    </script>
//Code inside foreach

    <a class="arrow" xlink:href="<?= $url; ?>" xlink:title="<?=  $title; ?>">


                        <polygon id="poly" points="<?= $points; ?>" fill="none" opacity="1" />  
                        <use id="theUse" xlink:href="#pin" x="20" y="20" width="40" height="40" />

                        </a> 

                        <script>
                        myfunction();
                        </script>
[/code]

我认为这是 poly.getBBox() 的问题；也许这与重新使用的 poly 的 ID 有关？我是否需要为循环添加一个计数，每个循环的增量。

Answer 1

一种方法是使用多边形的边界框找到中心，然后相对于该中心定位符号。

接下来是一个示例，其中我使用了您的代码的简化版本。在这种情况下，针尖位于多边形的中心-

观察:在您的代码中有 id="pin"两次。

// the bounding box of the polygon
let BB = poly.getBBox();
// the center of the polygon
let center = {x:BB.x + BB.width/2,
              y:BB.y + BB.height/2}
//the size of the symbol
let symbol = {w:30,h:30}
// set the values for the x and y attributes of the symbol
theUse.setAttributeNS(null, "x",center.x - symbol.w/2)
theUse.setAttributeNS(null, "y",center.y - symbol.h)

svg{position:absolute;top:0;left:0; width:90vh}

<svg id="svgmap" viewBox="0 0 100 100"  >
<defs>
<symbol id="pin" viewBox='0 0 24 24'>
    <path id="thePath" d='M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'></path>
    <path d='M0 0h24v24h-24z' fill='none'></path>
</symbol>
</defs>


<a class="arrow" id="a_pin" xlink:href="kk" xlink:title="title">
<g id="my-group">
  
<polygon id="poly" points="10,10 90,30 70,70 24,80" fill="gold"  opacity="1" />
<use id="theUse" xlink:href="#pin" x="20" y="20" width="30" height="30" />
  
</g>
</a> 
</svg>

更新

如果您有多个多边形，则需要循环遍历 <a class=arrow像这样的元素:

let aPins = svgmap.querySelectorAll(".arrow");

aPins.forEach(a => {
  let poly = a.querySelector("polygon");
  let pin = a.querySelector("use");
  centerPin(poly, pin);
});

function centerPin(poly, pin) {
  // the bounding box of the polygon
  let BB = poly.getBBox();
  // the center of the polygon
  let center = {
    x: BB.x + BB.width / 2,
    y: BB.y + BB.height / 2
  };
  //the size of the symbol
  let symbol = { w: 30, h: 30 };
  // set the values for the x and y attributes of the symbol
  pin.setAttributeNS(null, "x", center.x - symbol.w / 2);
  pin.setAttributeNS(null, "y", center.y - symbol.h);
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 90vh;
  border: 1px solid;
}

<svg id="svgmap" viewBox="0 0 200 100"  >
<defs>
<symbol id="pin" viewBox='0 0 24 24'>
    <path id="thePath" d='M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'></path>
    <path d='M0 0h24v24h-24z' fill='none'></path>
</symbol>
</defs>


<a class="arrow" id="a_pin1" xlink:href="kk" xlink:title="title">
<g id="my-group">  
<polygon points="10,10 90,30 70,70 24,80" fill="gold"  opacity="1" />
<use  xlink:href="#pin" x="20" y="20" width="30" height="30" />  
</g>
</a> 
  
<a class="arrow" id="a_pin2" xlink:href="kk" xlink:title="title">
<g id="my-group">  
<polygon points="90,30 70,70 133,90 180,25" fill="skyBlue"   opacity="1" />
<use  xlink:href="#pin" x="20" y="20" width="30" height="30" />  
</g>
</a>  
  
</svg>