Responsive build - Positionierung von benutzerdefinierten Markierungen auf einer benutzerdefinierten Karte

Question

Ich verwende absolute Positionierung, um die Markierungen auf der Karte zu platzieren - aber ich fange an, ein Problem mit den Responsive Mobile/Desktop Builds zu versuchen, um sicherzustellen, dass die Markierungen entsprechen Karte.

Ich habe versucht, die Karte auf einer konstanten Höhe zu halten - und schauen, um die Karte in der horizontalen Ebene zu verschieben.

// Code

Css

.mapwrap{ 
    position: relative; 
    height: 900px; 
    overflow: hidden; 
} 

.mapholder{ 
    margin-left: -30%; 
    position: relative; 
} 

.map{ 
    height: 100%; 
    width: auto; 
} 



.marker{ 
    position: absolute; 
} 

.marker .markerpointer{ 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -50%; 
} 

.marker.small .markerpointer{ 
    width: 60%; 
    margin-left: -30%; 
} 


.pointer{ 
    /*background: orange;*/ 
    position: relative; 
    width: 163px; 
    height: 240px; 
} 

.markerimage{ 
    border-radius: 100%; 
    height: 150px; 
    width: 150px; 
    z-index: 2; 
    top: 10px; 
    left: 10px; 
} 

html

<div class="mapwrap"> 
           <div class="mapholder"> 
            <div class="markerholder"> 
             <div class="marker large" data-type="markers" data-size="large" data-pos-x="41%" data-pos-y="16%" style="left: 41%; top: 16%;"> 
              <div class="markerwrap"> 
               <div class="pointer"> 
                <div data-type="curve"><svg width="195" height="195"><path id="wavy0" d="M-69.42135624665146,-44.57494023412153A82.5,82.5,0,1,1,5.051668046482832e-15,82.5L4.745506346695993e-15,77.5A77.5,77.5,0,1,0,-65.21400132261198,-41.873428704780835Z" transform="translate(97.5,97.5)" style="fill: none;"></path><text><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wavy0" startOffset="0">some text that needs</textPath></text></svg></div> 
                <div class="coverimg"><img src="images/assets/square/0.jpg"></div> 
                <img class="markerpointer" src="images/marker.png"> 
               </div> 
              </div> 
             </div> 

             <div class="marker small" data-type="markers" data-size="small" data-pos-x="427" data-pos-y="287" style="left: 427px; top: 287px;"> 
              <div class="markerwrap"> 
               <div class="pointer"> 
                <div data-type="curve"><svg width="129.796875" height="129.796875"><path id="wavy1" d="M-41.988087343500275,-26.960240840467254A49.8984375,49.8984375,0,1,1,3.0553980883414628e-15,49.8984375L2.7492363885546245e-15,44.8984375A44.8984375,44.8984375,0,1,0,-37.78073241946079,-24.258729311126558Z" transform="translate(64.8984375,64.8984375)" style="fill: none;"></path><text><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wavy1" startOffset="0">some text that needs</textPath></text></svg></div> 
                <div class="coverimg"><img src="images/assets/square/1.jpg"></div> 
                <img class="markerpointer" src="images/marker.png"> 
               </div> 
              </div> 
             </div> 

             <div class="marker small" data-type="markers" data-size="small" data-pos-x="400" data-pos-y="517" style="left: 400px; top: 517px;"> 
              <div class="markerwrap"> 
               <div class="pointer"> 
                <div data-type="curve"><svg width="129.796875" height="129.796875"><path id="wavy2" d="M-41.988087343500275,-26.960240840467254A49.8984375,49.8984375,0,1,1,3.0553980883414628e-15,49.8984375L2.7492363885546245e-15,44.8984375A44.8984375,44.8984375,0,1,0,-37.78073241946079,-24.258729311126558Z" transform="translate(64.8984375,64.8984375)" style="fill: none;"></path><text><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wavy2" startOffset="0">some text that needs</textPath></text></svg></div> 
                <div class="coverimg"><img src="images/assets/square/2.jpg"></div> 
                <img class="markerpointer" src="images/marker.png"> 
               </div> 
              </div> 
             </div> 

             <div class="marker large" data-type="markers" data-size="large" data-pos-x="571" data-pos-y="651" style="left: 571px; top: 651px;"> 
              <div class="markerwrap"> 
               <div class="pointer"> 
                <div data-type="curve"><svg width="195" height="195"><path id="wavy3" d="M-69.42135624665146,-44.57494023412153A82.5,82.5,0,1,1,5.051668046482832e-15,82.5L4.745506346695993e-15,77.5A77.5,77.5,0,1,0,-65.21400132261198,-41.873428704780835Z" transform="translate(97.5,97.5)" style="fill: none;"></path><text><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wavy3" startOffset="0">some text that needs</textPath></text></svg></div> 
                <div class="coverimg"><img src="images/assets/square/3.jpg"></div> 
                <img class="markerpointer" src="images/marker.png"> 
               </div> 
              </div> 
             </div> 
            </div> 

            <img class="map" src="images/map.png"> 
           </div> 
          </div> 

Answer 1

mit absoluter Positionierung mit festen Koordinaten left & top sollte perfekt für Sie arbeiten und die Marker würden mit dem img übereinstimmen, den Sie angehängt haben.

Aktualisiert Geige: https://jsfiddle.net/nashcheez/vxrjesL6/2/

Siehe Code:

.mapwrap { 
 
    position: relative; 
 
    height: 900px; 
 
    overflow: hidden; 
 
} 
 

 
.mapholder { 
 
    position: relative; 
 
} 
 

 
.map { 
 
    height: 100%; 
 
    width: auto; 
 
} 
 

 
.marker { 
 
    position: absolute; 
 
} 
 

 
.coverimg img { 
 
    border-radius: 100%; 
 
    display: none; 
 
} 
 

 
.marker .markerpointer { 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -50%; 
 
} 
 

 
.marker.small .markerpointer { 
 
    width: 60%; 
 
    margin-left: -30%; 
 
} 
 

 
.pointer { 
 
    /*background: orange;*/ 
 
    position: relative; 
 
    width: 163px; 
 
    height: 240px; 
 
} 
 

 
.markerimage { 
 
    border-radius: 100%; 
 
    height: 150px; 
 
    width: 150px; 
 
    z-index: 2; 
 
    top: 10px; 
 
    left: 10px; 
 
}

<body> 
 
    <div class="mapwrap"> 
 
    <div class="mapholder"> 
 
     <div class="markerholder"> 
 
     <div class="marker large" data-type="markers" data-size="large" data-pos-x="41%" data-pos-y="16%" style="left: 370px; top: 137px;"> 
 
      <div class="markerwrap"> 
 
      <div class="pointer"> 
 
       <div data-type="curve"> 
 
       <svg width="195" height="195"> 
 
        <path id="wavy0" d="M-69.42135624665146,-44.57494023412153A82.5,82.5,0,1,1,5.051668046482832e-15,82.5L4.745506346695993e-15,77.5A77.5,77.5,0,1,0,-65.21400132261198,-41.873428704780835Z" transform="translate(97.5,97.5)" style="fill: none;"></path> 
 
        <text> 
 
        <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wavy0" startOffset="0">some text that needs</textPath> 
 
        </text> 
 
       </svg> 
 
       </div> 
 
       <div class="coverimg"><img src="http://statici.behindthevoiceactors.com/behindthevoiceactors/_img/chars/plastic-man-young-justice-8.6.jpg"></div> 
 
       <img class="markerpointer" src="http://www.theoldcounty.com/temp/marker.png"> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="marker small" data-type="markers" data-size="small" data-pos-x="427" data-pos-y="287" style="left: 427px; top: 287px;"> 
 
      <div class="markerwrap"> 
 
      <div class="pointer"> 
 
       <div data-type="curve"> 
 
       <svg width="129.796875" height="129.796875"> 
 
        <path id="wavy1" d="M-41.988087343500275,-26.960240840467254A49.8984375,49.8984375,0,1,1,3.0553980883414628e-15,49.8984375L2.7492363885546245e-15,44.8984375A44.8984375,44.8984375,0,1,0,-37.78073241946079,-24.258729311126558Z" transform="translate(64.8984375,64.8984375)" 
 
        style="fill: none;"></path> 
 
        <text> 
 
        <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wavy1" startOffset="0">some text that needs</textPath> 
 
        </text> 
 
       </svg> 
 
       </div> 
 
       <div class="coverimg"><img src="http://statici.behindthevoiceactors.com/behindthevoiceactors/_img/chars/plastic-man-young-justice-8.6.jpg"></div> 
 
       <img class="markerpointer" src="http://www.theoldcounty.com/temp/marker.png"> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="marker small" data-type="markers" data-size="small" data-pos-x="400" data-pos-y="517" style="left: 400px; top: 517px;"> 
 
      <div class="markerwrap"> 
 
      <div class="pointer"> 
 
       <div data-type="curve"> 
 
       <svg width="129.796875" height="129.796875"> 
 
        <path id="wavy2" d="M-41.988087343500275,-26.960240840467254A49.8984375,49.8984375,0,1,1,3.0553980883414628e-15,49.8984375L2.7492363885546245e-15,44.8984375A44.8984375,44.8984375,0,1,0,-37.78073241946079,-24.258729311126558Z" transform="translate(64.8984375,64.8984375)" 
 
        style="fill: none;"></path> 
 
        <text> 
 
        <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wavy2" startOffset="0">some text that needs</textPath> 
 
        </text> 
 
       </svg> 
 
       </div> 
 
       <div class="coverimg"><img src="http://statici.behindthevoiceactors.com/behindthevoiceactors/_img/chars/plastic-man-young-justice-8.6.jpg"></div> 
 
       <img class="markerpointer" src="http://www.theoldcounty.com/temp/marker.png"> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="marker large" data-type="markers" data-size="large" data-pos-x="571" data-pos-y="651" style="left: 571px; top: 651px;"> 
 
      <div class="markerwrap"> 
 
      <div class="pointer"> 
 
       <div data-type="curve"> 
 
       <svg width="195" height="195"> 
 
        <path id="wavy3" d="M-69.42135624665146,-44.57494023412153A82.5,82.5,0,1,1,5.051668046482832e-15,82.5L4.745506346695993e-15,77.5A77.5,77.5,0,1,0,-65.21400132261198,-41.873428704780835Z" transform="translate(97.5,97.5)" style="fill: none;"></path> 
 
        <text> 
 
        <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wavy3" startOffset="0">some text that needs</textPath> 
 
        </text> 
 
       </svg> 
 
       </div> 
 
       <div class="coverimg"><img src="http://statici.behindthevoiceactors.com/behindthevoiceactors/_img/chars/plastic-man-young-justice-8.6.jpg"></div> 
 
       <img class="markerpointer" src="http://www.theoldcounty.com/temp/marker.png"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <img class="map" src="http://www.theoldcounty.com/temp/map.png"> 
 
    </div> 
 
    </div> 
 
</body>