Javascript 响应构建-在自定义地图上定位自定义标记
我使用绝对定位将标记放置在地图上，但我开始遇到问题，因为快速响应的移动/桌面构建试图确保标记与地图相对应 我试着让地图保持在一个恒定的高度，并在水平面上移动地图 //代码 css htmlJavascript 响应构建-在自定义地图上定位自定义标记,javascript,html,css,responsive,Javascript,Html,Css,Responsive,我使用绝对定位将标记放置在地图上，但我开始遇到问题，因为快速响应的移动/桌面构建试图确保标记与地图相对应 我试着让地图保持在一个恒定的高度，并在水平面上移动地图 //代码 css html 一些需要修改的文本 一些需要修改的文本 一些需要修改的文本 一些需要修改的文本 使用固定坐标为左和顶的绝对定位应该非常适合您，标记将与您连接的img对齐 更新小提琴： 参考代码： .mapwrap{ 位置：相对位置； 高度：900px； 溢出：隐藏； } 地图持有者先生{ 位置：相对位置； } .地图
一些需要修改的文本
一些需要修改的文本
一些需要修改的文本
一些需要修改的文本
左顶img.mapwrap{
位置：相对位置；
高度：900px；
溢出：隐藏；
}
地图持有者先生{
位置：相对位置；
}
.地图{
身高：100%；
宽度：自动；
}
.马克{
位置：绝对位置；
}
.掩护{
边界半径：100%；
显示：无；
}
.马克笔.马克笔{
宽度：100%；
位置：绝对位置；
底部：0；
左：50%；
左边缘：-50%；
}
.marker.small.markerpointer{
宽度：60%；
左边缘：-30%；
}
.指针{
/*背景：橙色*/
位置：相对位置；
宽度：163px；
高度：240px；
}
.markerimage{
边界半径：100%；
高度：150像素；
宽度：150px；
z指数：2；
顶部：10px；
左：10px；
}
一些需要修改的文本
一些需要修改的文本
一些需要修改的文本
一些需要修改的文本
左顶img.mapwrap{
位置：相对位置；
高度：900px；
溢出：隐藏；
}
地图持有者先生{
位置：相对位置；
}
.地图{
身高：100%；
宽度：自动；
}
.马克{
位置：绝对位置；
}
.掩护{
边界半径：100%；
显示：无；
}
.马克笔.马克笔{
宽度：100%；
位置：绝对位置；
底部：0；
左：50%；
左边缘：-50%；
}
.marker.small.markerpointer{
宽度：60%；
左边缘：-30%；
}
.指针{
/*背景：橙色*/
位置：相对位置；
宽度：163px；
高度：240px；
}
.markerimage{
边界半径：100%；
高度：150像素；
宽度：150px；
z指数：2；
顶部：10px；
左：10px；
}
一些需要修改的文本
一些需要修改的文本
一些需要修改的文本
.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;
}
<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>