如何在 Leaflet 中标记类似于 Google 地图的标记

Question

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

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

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

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

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

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>

如何在 Leaflet 中标记类似于 Google 地图的标记

How to label markers similar to Google Maps in Leaflet

javascript

popup

marker

leaflet