gpt4 book ai didi

javascript - 响应式构建 - 在自定义 map 上定位自定义标记

转载 作者:行者123 更新时间:2023-11-28 04:56:51 25 4
gpt4 key购买 nike

我使用绝对定位将标记放置在 map 上 - 但我开始遇到响应式移动/桌面构建的问题,试图确保标记与 map 相对应。

我尝试将 map 保持在恒定高度 - 并尝试在水平面上移动 map 。

enter image description here enter image description here

//代码

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>

最佳答案

使用固定坐标 lefttop 的绝对定位应该非常适合您,并且标记将与您附加的 img 对齐.

更新的 fiddle :https://jsfiddle.net/nashcheez/vxrjesL6/2/

引用代码:

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

关于javascript - 响应式构建 - 在自定义 map 上定位自定义标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42484503/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com