1. 시나리오

기본 이것을

이런 식으로 시도했습니다.

2. 소스

ぇ tp // // ぇぇ tjs. 코m/ 샘플에 CSS를 몇 줄 추가하면 완성됩니다.

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Leaflet Popup CSS Hack</title>

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <style>
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    #map {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
      background: black;
      border-color: orange;
    }

    .leaflet-popup-content,
    a.leaflet-popup-close-button {
      color: orange !important;
      font: bold 14pt monospace;
    }

    .leaflet-popup-content-wrapper {
      border-width: 3px;
      border-style: solid;
    }

    .leaflet-popup-tip-container {
      margin-top: -3px;
      height: 23px;
    }

    .leaflet-popup-tip {
      border-style: solid;
      border-width: 0 3px 3px 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
      .bindPopup('A pretty CSS3 popup.<br/> Easily customizable.')
      .openPopup();
  </script>
</body>

</html>

3. 해설

팝업 아래의 DOM 트리는 대체로 다음과 같은 구조로 되어 있으므로 이것을 바탕으로 CSS를 추가 정의해 갈 뿐입니다.

+ div.leaflet-popup
    + a.leaflet-popup-close-button
        + "x"
    + div.leaflet-popup-content-wrapper
        + div.leaflet-popup-content
            + "A pretty CSS3 popup..."
    + div.leaflet-popup-tip-container
        + div.leaflet-popup-tip

element
note

div.leaflet-popup
루트 컨테이너

a.leaflet-popup-close-button
오른쪽 상단의 닫기 버튼

div.leaflet-popup-content-wrapper
팝업 본체

div.leaflet-popup-content
팝업 문자열의 자리 표시자

div.leaflet-popup-tip-container
팝업 아래 삼각형을 유지하는 영역

div.leaflet-popup-tip
팝업 아래 삼각형 본체

팝업의 배경색과 테두리는 div.leaflet-popup-content-wrapper 및 div.leaflet-popup-tip에 지정

테두리를 붙여 부풀린 만큼 div.leaflet-popup-tip-container의 마진을 변경하여 조절

글꼴 및 문자 색상 변경은 a.leaflet-popup-close-button 및 div.leaflet-popup-content에 대해 설정됩니다.

a.leaflet-popup-close-button은 기본적으로 회색으로 지정되므로!important를 붙여 덮어 씁니다.

4. 메모

Leaflet 0.7계에서도 1.0계에서도 여기의 DOM 구조는 공통되어 있으므로, 문제 없게 움직일 것이다.

Reference

이 문제에 관하여(Leaflet 팝업 사용자 정의), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/frogcat/items/2e1746e3bc637123af44

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다