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

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

您试图将弹出窗口附加到什么layer？您需要定义一些layer才能将弹出窗口附加到该页面。

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

Here is a working codesandbox

您可能想研究L.Layer是什么。 Leaflet中的许多其他图层类型都是L.Layer的扩展。您必须将弹出式窗口附加到该类别中。

Answer 2

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

在我的示例中，我通过了

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

并且其中的选项和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也许对您有用。