如何为自定义传单弹出窗口添加样式

Question

我正在尝试添加标记弹出窗口的样式，但样式并未反映在弹出窗口中。 也无法添加启动按钮。

import { Map, marker} from "leaflet";

const popupOptions = { className: "customPopup" };
const template = "<div>Class</div>" + "<div>undefined</div>" +
      '<button  class="edit" id="buttonEdit" type="button">Edit</button>';
      
const markerLayer = marker([latitute, longitute], {
      icon: icon({
        iconSize: [25, 41],
        iconAnchor: [13, 41],
        iconUrl: imageURL
      })
    }).bindPopup(template, popupOptions);
map.addLayer(markerLayer);

.customPopup .leaflet-popup-content-wrapper .leaflet-popup-content{
  width: 251px;
}

.customPopup 
.leaflet-popup-content-wrapper 
.leaflet-popup-content
.edit{
  color: #fefefe;
}

Answer 1

如果您查看文档，您可以传递给 bindPopup（字符串 | HTMLElement | 函数 | 弹出内容，选​​项） - documentation

在我的例子中，我通过了

const customPopup = '<input type="text">';

而且里面的options和className可以用来控制弹窗的外观。

const customOptions = {
 'maxWidth': 'auto', // set max-width
 'className': 'customPopup' // name custom popup
}

现在将这两个选项传递给bindPopup 标记就足够了。

L.marker([lat, lon])
  .bindPopup(customPopup, customOptions)
  .addTo(map);

/**
 * Custom marker and popup
 */

// config map
let config = {
  minZoom: 7,
  maxZomm: 18,
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 50.0619474;
const lon = 19.9368564;

// calling map
const map = L.map('map', config).setView([lat, lon], 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);


const funny = L.icon({
  iconUrl: 'http://grzegorztomicki.pl/serwisy/pin.png',
  iconSize: [50, 58], // size of the icon
  iconAnchor: [20, 58], // changed marker icon position
  popupAnchor: [0, -60] // changed popup position
});


// create popup contents
const customPopup = '<input type="text">';

// specify popup options  
const customOptions = {
  'maxWidth': 'auto', // set max-width
  'className': 'customPopup' // name custom popup
}

// create marker object, pass custom icon as option, pass content and options to popup, add to map
L.marker([lat, lon], {
    icon: funny
  })
  .bindPopup(customPopup, customOptions)
  .addTo(map);

* {
  margin: 0;
  padding: 0
}

html {
  height: 100%
}

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

body {
  height: 100%;
}

.customPopup .leaflet-popup-content-wrapper,
.customPopup .leaflet-popup-tip {
  background: #000;
  color: #fff;
}

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

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

我使用传单准备了一组基本示例 - leaflet-examples 也许对你有用。

Answer 2

您想将弹出窗口附加到哪个layer？您需要定义一些layer 以将弹出窗口附加到。

您的其余代码工作正常。例如，如果您将弹出窗口附加到 L.Marker，它就可以正常工作。

Here is a working codesandbox

您可能想了解L.Layer 是什么。 Leaflet 中的许多其他层类型都是L.Layer 的扩展。您必须将弹出窗口附加到属于该类别的内容。