传单：如何标记类似于Google地图的标记

Question

我正在使用Leaflet加载bing地图图块。地图加载正常，我可以在地图上放置标记。

但是我想知道如何显示标记的标签，类似于在Google地图中显示标记的方式，即标记后附加的文本。

我要在地图上显示标记及其描述的方式：   

我查看了Leaflet文档。我找到了Popup和Tooltip，但是它们没有提供我想要的视图类型。

有人知道传单中的某些功能，通过这些功能我可以实现所需的行为。

Answer 1

要实现该行为，您需要隐藏弹出内容包装器，并使用L.icon通过提供x, y coordinates

将弹出内容放置在所需的位置

var map = L.map('mapid').setView([51.505, -0.09], 5);

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

var popup1 = L.popup({
  closeOnClick: false,
  autoClose: false
}).setContent("A pretty CSS3 popup.");

L.marker([52.5, -0.09]).addTo(map)
  .bindPopup(popup1)
  .openPopup();

var yourIcon = L.icon({
  iconUrl: 'https://unpkg.com/leaflet@1.3.3/dist/images/marker-icon.png',
  popupAnchor: [30, 120]
});

var customOptions = {
  'className': 'custom',
}

var popup2 = L.popup({
  closeOnClick: false,
  autoClose: false
}).setContent("A pretty CSS3 popup.<br> Easily customizable.'");


L.marker([51.5, -0.09], {
    icon: yourIcon
  }).addTo(map)
  .bindPopup(popup2, customOptions).openPopup();

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

<style>
  #mapid {
    height: 100vh;
  }
  
  .custom .leaflet-popup-close-button,
  .custom .leaflet-popup-tip-container {
    display: none;
  }
  
  .custom .leaflet-popup-content-wrapper,
  .custom .leaflet-popup-tip {
    background-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  
  .custom .leaflet-popup-content {
    font-size: 1.2rem;
    color: blue;
  }
</style>
<div id="mapid"></div>