Question

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

我想在每个多边形上添加一个标记图标中心，如果可能，在激活（单击）时更改颜色可以将SVG或.png用于Pin。

单击后，他们会在URL中添加＃1，＃2等-用于在页面上的TEXT区域填充联系人信息。

每个区域都使用foreach语句添加到地图。

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

<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> 

}

在地图的左上方显示所有图标。.不在每个部分的中心。

更新

使用下面的解决方案确定：我在循环上方创建了以下函数，但遇到“未捕获的TypeError错误：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>

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

1 个答案:

更新