Css 如何使标记的原点位于左下角？

我使用的是传单JS，但我不知道如何更改标记源的位置

目前，标记的原点（它们“粘”到地图上的假想点）位于左上角

我需要它位于左下角，因为我的标记HTML看起来有点像一面旗帜

|--------+
|this is |
|a marker|
|--------+
|

有没有办法用传单来做这件事

还是我需要做一些非常复杂的CSS？（标记根据其内容垂直和水平展开。）

---

更新：我正在使用以下内容创建标记：

var html = '<div class="tag_main_pedestrian">' + content + '</div><div class="triangle_pedestrian"></div>';
var icon = L.divIcon({html: html, className: 'tag_icon_pedestrian'});
        this.markers[beacon] = L.marker(this.pedestrians[index].geotag,
        {icon: icon});
this.markers[beacon].addTo(this.map);

var html=''+content+''；
var icon=L.divIcon（{html:html，类名：'tag_icon_peander'}）；
this.markers[beacon]=L.marker（this.peeders[index].geotag，
{icon:icon}）；
this.markers[beacon].addTo（this.map）；

尝试以下CSS代码：

position: fixed;
bottom: 0;
left: 0;

有人已经在这里问了一些与此相关的问题：

---

希望它能帮助您。

确实，您需要使用自己的CSS向上移动图标，但它不应该“非常复杂”

通常，使用CSS转换应该做到以下几点：

巴黎var=[48.86,2.35]； var map=L.map（“map”）.setView（巴黎，11）； var myHtml=''； var myIcon=L.divIcon({ html:myHtml， 类名：“标记图标行人”， iconSize:null， }); L.marker（巴黎{ 图标：我的图标， }).addTo（地图）； var inputEl=document.getElementById（'input'）； var contentEl=document.getElementById（'content'）； inputEl.addEventListener（'input'，updateContent）； updateContent（）； 函数updateContent（）{ contentEl.innerHTML=inputEl.value； } L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{ 属性：“©；贡献者” }).addTo（地图）

.tag\u图标\u{
高度：0；/*避免出现“重影”可点击区域*/
}
.iconContent{
背景颜色：黄色；
边框：1px纯黑；
transform:translateY（-100%）；/*将图标移动到其全部内容高度*/
}

---

解决方案是使用以下方法将传单标记图标缩小到一个点：

div.tag_icon_pedestrian {
    margin-left: 0px !important;
    margin-top: 0px !important;
    width: 0px !important;
    height: 0px !important;
}

并插入另一个分区：

var html = '<div style="position: fixed; bottom: 0; left: 0;"><div class="tag_main_pedestrian">' + content + '</div><div class="triangle_pedestrian"></div></div>';

var html=''+content+''；

我解决这个问题的方法是使

L.DivIcon

包含一个零大小，相对定位

，并且在其中包含另一个

。内部的

是绝对定位的（相对于最近的祖先，具有明确的

位置

CSS样式，即外部样式）

代码如下所示。注意，我添加一些边框只是为了查看每个

的位置：

var html = `
<div style="position: relative; width: 0; height: 0; border: 3px black solid">
  <div style="position: absolute; bottom: 0; border:2px red solid; background:white">
    Null Island
  </div>
</div>
`;

var icon = L.divIcon({html: html});

L.marker([0, 0], {icon: icon}).addTo(map);

var html=`
零岛
`;
var icon=L.divIcon（{html:html}）；
L.marker（[0,0]，{icon:icon}）.addTo（map）；

它看起来像这样（或）：

---

其他答案都是正确的，但我处理

位置：绝对
的方法比
位置：固定
和
的方法更简洁！重要信息
CSS规则。
检查自定义图标的
iconAnchor
属性，该属性允许您指定图标上的哪个点与标记坐标对齐。您现在是如何创建标记的？您使用的是
L.Icon
还是
L.DivIcon
？你能提供一点关于这个的代码吗？@peeebee我试过iconAnchor，但它需要像素值。我不知道每个标记会有多大（除非我在屏幕外创建一个复制的div并测量它）。@IvanSanchez我已经更新了问题，添加了创建代码。谢谢，这是解决方案的一部分。谢谢，这很有趣。我使用了一个零大小的图标和一个额外的div，因为它可能与旧浏览器更兼容。