响应式构建 - 在自定义地图上定位自定义标记
我使用绝对定位将标记放在地图上 - 但我开始遇到响应式移动/桌面版本的问题，试图确保标记与地图对应。
我试图将地图保持在恒定高度 - 并希望在水平面上移动地图。
//代码
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>
1 个答案:
答案 0 :(得分：0)
使用固定坐标为left＆amp;的绝对定位top应该对您有效，标记会与您附加的img对齐。
更新了小提琴：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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？