0

我正在尝试移植具有 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。

4

1 回答 1

1

你不需要任何jquery。一个小图书馆就够了。看看这个虎斑，这里有一个如何使用它的例子 -例子

在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>

我在弹出窗口中的示例选项卡中添加了一个使用选项卡的示例

于 2021-11-28T10:03:57.717 回答