如何移植 Google 地图应用程序中使用 infobubble.js 的部分以使用 Leaflet？

Question

我正在尝试移植一个具有 Google 地图插件的旧应用程序，并使用 infobubble.js 在地图上显示弹出窗口以使用 Leaflet。我已经完成了大部分工作，但我不确定如何处理使用 infobubble.js 的部分。特别是，它使用了 infobubble 的选项卡功能，例如infoBubble.addTab() 将 html 信息的几个不同位附加到一个位置/标记。我查看了 https://leafletjs.com/plugins.html 上的传单插件，但没能找到任何看起来合适的东西。我在 https://github.com/googlearchive/js-info-bubble 找到了 infobubble.js 的源代码，但将其移植到 Leaflet 似乎超出了我有限的 javascript 能力。我也考虑过做一个简单的替换，但是大多数关于创建选项卡式内容的参考似乎都建议使用 jquery 来管理选项卡，但是（同样，由于我的技能有限）我不确定这是否可行，或者如何使用仅显示在弹出窗口中的 html 来做到这一点。

Answer 1

您不需要任何 jquery。一个小图书馆就够了。看看这个tabby and here is an example of how to use it - example

在 leaflejs 中构建弹出窗口时，您需要做的就是适当的 html，仅此而已。您唯一需要做的就是使用 css.

将选项卡移动到弹出框后面

/* eslint-disable no-undef */
/**
 * tabs in popup
 */

// config map
let config = {
  minZoom: 1,
  maxZomm: 18,
};
// magnification with which the map will start
const zoom = 15;
// co-ordinates
const lat = 50.0595;
const lng = 19.9379;

// calling map
const map = L.map("map", config).setView([lat, lng], zoom);

// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
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);

// custom popup image + text
const customPopup = `<div class="customPopup">
    <ul class="tabs-example" data-tabs>
      <li><a data-tabby-default href="#sukiennice">Sukiennice</a></li>
      <li><a href="#lorem">lorem</a></li>
    </ul>
    <div id="sukiennice">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/A-10_Sukiennice_w_Krakowie_Krak%C3%B3w%2C_Rynek_G%C5%82%C3%B3wny_MM.jpg/1920px-A-10_Sukiennice_w_Krakowie_Krak%C3%B3w%2C_Rynek_G%C5%82%C3%B3wny_MM.jpg" width="300">Source: wikipedia.org<div>Kraków,[a] also written in English as Krakow and traditionally known as Cracow, is the second-largest and one of the oldest cities in Poland. Situated on the Vistula River in Lesser Poland Voivodeship... <a href="https://en.wikipedia.org/wiki/Krak%C3%B3w" target="_blank">→ show more</a></div>
    </div>
    <div id="lorem">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.
    </div>
  </div>`;

// specify popup options
const customOptions = {
  minWidth: "220", // set max-width
  keepInView: true, // Set it to true if you want to prevent users from panning the popup off of the screen while it is open.
};

const marker = L.marker([50.0616, 19.9373])
  .bindPopup(customPopup, customOptions)
  .on('click', tabsrun);

marker.addTo(map);

// center map when click on marker
function tabsrun(e) {
  if (marker.isPopupOpen()) {
    const tabs = new Tabby("[data-tabs]");
  }
}

html, body {
  height: 100%;
  margin: 0;
}

#map {
  height: 100%;
}

.tabs-example {
  margin-top: -45px !important;
  position: absolute;
}

.tabs-example li {
  background: #fff;
}

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/tabby@12.0.0/dist/js/tabby.polyfills.min.js"></script>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/cferdinandi/tabby@12.0.0/dist/css/tabby-ui.min.css" rel="stylesheet"/>

<div id="map"></div>

我在示例中添加了一个使用选项卡的示例 tabs in popup

如何移植 Google 地图应用程序中使用 infobubble.js 的部分以使用 Leaflet？

How can I port the part of a Google maps application that uses infobubble.js to use Leaflet?

javascript

leaflet

popup

infobubble