【Leaflet.js】주소로부터 위도 경도를 취득해 그 지점에 핀을 세운다

13283 단어 GeoCoding자바스크립트leaflet
Leaflet.js는 간단하고 확장 가능한 오픈 소스 맵 드로잉 라이브러리입니다.
이번에는 Leaflet 지도에 주소 검색 기능을 추가하고 싶습니다.

만들고 싶은 것


  • 입력된 주소에서 위도 경도를 구합니다
  • 목적지로지도의 중심을 이동
  • 그 지점에 핀을 세워 정보를 표시
  • 이런 느낌의 이미지 ↓



    • Leaflet 지도 준비



    파일 구성


    .
├── index.html
└── main.js

    index.html


  • leaflet.css 및 leaflet.js 로딩 순서에주의
  • 맵을 그리는 div 요소에 width 속성을 지정하지 않으면 표시되지 않으므로

    • index.html
    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>住所検索</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.min.js"></script>
    <style>
        #mymap {
            height: 500px;
            width: 500px;
        }
    </style>
</head>

<body>
    <input type="text" id="address" />
    <button id="search">検索</button>
    <div id="mymap"></div>
    <script type="module" src="./main.js"></script>
</body>

</html>

    main.js



    main.js
    const map = L.map("mymap", {
    center: [35.021028, 135.755583],
    zoom: 15
});
const baseLayer = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors'"
});
baseLayer.addTo(map);

    주소 입력을 받고 위도 경도를 구한다



    geolonia/normalize-japanese-addresses 소개



    주소에서 위도 경도를 얻으려면 오픈 소스 주소 정규화 라이브러리 geolonia/normalize-japanese-addresses을 사용하십시오.
    이 라이브러리는 인수에 부여한 주소를 퍼스·정규화한 후, Geolonia 주소 데이터 에 근거해 그 지역의 대표점의 위도 경도를 돌려줍니다.
    버전 2.3.0부터 ES Modules 형식에 해당하는 것처럼 import 절을 사용하여 로드할 수 있습니다. 사용 예를 아래에 나타냅니다.

    사용 예
    import { normalize } from 'https://cdn.skypack.dev/@geolonia/normalize-japanese-addresses';

normalize("滋賀県大津市御陵町3-1").then(result => {
    console.log(result);
});

    출력
    {
    pref: "滋賀県",
    city: "大津市",
    town: "御陵町",
    addr: "3-1",
    lat: 35.018665,
    lng: 135.855868,
    level: 3
}

    Leaflet 지도에 고정하는 방법


    bindPopup 의 인수에는 HTML 태그를 넣거나 할 수도 있습니다만, 자세한 것은 생략합니다. 공식 문서을 참조하십시오.
    const latitude = 35.018665; // 緯度
const longitude = 135.855868; // 経度
const marker = L.marker([latitude, longitude]); // markerオブジェクトを作成
marker.bindPopup("大津市役所"); // markerをクリックしたとき"大津市役所"と表示されるようにする
marker.addTo(map); // markerをLeaflet地図に追加



    그리고, 핀을 세워도 표시 범위에 없으면 변화를 알 수 없기 때문에, 핀을 세우는 것과 동시에 지도의 표시 범위도 그 지점으로 이동하도록 합시다.
    map.flyTo([latitude, longitude]);

    코드 조립



    처음 준비한 코드를 다음과 같이 다시 작성합니다.

    index.html



    변경 없음

    main.js



    main.js
    import { normalize } from 'https://cdn.skypack.dev/@geolonia/normalize-japanese-addresses'

const map = L.map("mymap", {
    center: [35.021028, 135.755583],
    zoom: 15
});
const baseLayer = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors'"
});
baseLayer.addTo(map);

// 以下を追加
document.getElementById("search").addEventListener("click", () => {
    const address = document.getElementById("address").value;
    normalize(address).then(result => {
        map.flyTo([result.lat, result.lng]); // 住所の地点に移動
        const marker = L.marker([result.lat, result.lng]); // ピンを作成
        marker.bindPopup(address); // ピンをクリックすると住所が表示されるようにする
        marker.addTo(map); // 地図にピンを立てる
    });
});

    완성!



    이것으로 우선 움직이는 것이 생겼습니다!



    홍보



    이 기사에서 작성한 프로그램에 에러 처리의 추가나 인터페이스의 개량을 실시한 것을 Leaflet 플러그인으로서 공개했습니다!

    Cocon/Leaflet.CommunityGeoCoder

    실제로 만져 움직일 수 있는 데모 페이지도 만들어 보았습니다. 꼭 활용해 주셔, 버그나 기능 제안등 있으면 부담없이 부탁드립니다.

    Demo | Cocon/Leaflet.CommunityGeoCoder
    react-leaflet의 마커 회전
    e-stat 연구 6

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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