Карта пользовательских изображений с многоугольником - добавлен значок карты

Question

У меня есть Карта изображения - с 20 кликабельными Маркерными точками, сделанными с использованием многоугольников.

Я хочу добавить Центр значков маркеров к каждому многоугольнику, который, если возможно, меняет цвет, когда активный (щелчок) может использовать SVG или .png для Pin.

При нажатии они добавляют # 1, #2 и т. Д. По URL-адресу - используется для заполнения области ТЕКСТ на странице контактной информацией.

Каждая область добавляется на карту с помощью оператора 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> 

}

Отображение всех значков в левом верхнем углу карты. Не по центру для каждого раздела.

ОБНОВЛЕНИЯ

---

Хорошо, используя решение ниже: Я создалследующая функция выше моего цикла, но я обнаружил ошибку с «Uncaught TypeError: poly.getBBox не является функцией в myfunction (contacts: 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 ();Может быть, это связано с повторным использованием идентификатора поли?Нужно ли мне добавить в цикл счетчик приращение для каждого цикла.

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>

UPDATE

В случае, если у вас есть несколько полигонов, вам нужно сделать это, проходя по элементам <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>