代码之家 › 专栏 › 技术社区 › fadedbee

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

leaflet css

fadedbee · 技术社区 · 7 年前

我正在使用传单,但我不知道如何改变标记的起源位置。

目前,标记的原点(它们被“粘”到地图上的假想点)位于左上角。

我需要它在左下角,因为我的标记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);

4 回复 | 直到 7 年前

ghybs 7 年前

实际上,您需要使用自己的CSS将图标向上移动,但它不应该是“ 非常复杂 “。

通常,使用CSS转换应该做到以下几点:

var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);

var myHtml = '<div class="iconContent" id="content"></div>';

var myIcon = L.divIcon({
  html: myHtml,
  className: 'tag_icon_pedestrian',
  iconSize: null,
});

L.marker(paris, {
  icon: myIcon,
}).addTo(map);

var inputEl = document.getElementById('input');
var contentEl = document.getElementById('content');
inputEl.addEventListener('input', updateContent);
updateContent();

function updateContent() {
  contentEl.innerHTML = inputEl.value;
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

.tag_icon_pedestrian {
  height: 0; /* Avoid a "ghost" clickable area */
}

.iconContent {
  background-color: yellow;
  border: 1px solid black;
  transform: translateY(-100%); /* Move your icon its full content height */
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<input value="Lorem ipsum" id="input" />
<div id="map" style="height: 160px"></div>

Daniel Castro 7 年前

尝试此CSS代码:

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

希望对你有帮助。

IvanSanchez 7 年前

我解决这个问题的方法是 L.DivIcon 包含零大小,相对位置 <div> 在里面,另一个 <分区> . 内部 <分区> 绝对定位(相对于最近的祖先 position 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);

看起来像这样(或者 try it yourself ):

其他答案是有效的,但我要处理 position: absolute 比 position: fixed 和 !important CSS规则。

fadedbee 7 年前

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

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>';