javascript - 如何在Leaflet中标记类似于Google map 的标记

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this question

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

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

我想在 map 上显示标记及其描述的方式:

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

有谁知道 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>