cari
Rumahhujung hadapan webtutorial jsMembina Plot Imej XY Interaktif dengan Skrip Google Apps dan Leaflet.js

Google 지도에는 지도에 지점을 표시하는 다양한 기능이 있지만 이미지에 지점을 표시하려면 어떻게 해야 할까요? 이러한 XY 이미지 플롯 맵은 평면도, 작업 현장 검사, 심지어 게임에도 일반적으로 사용됩니다.

이 가이드에서는 Leaflet.js 및 Google Apps Script를 사용하여 드래그 가능한 지점이 있는 대화형 지도를 만드는 방법을 보여 드리겠습니다. 지도 설정부터 Google Sheets의 데이터 통합, 웹 앱 배포까지 모든 과정을 다룹니다.

이 가이드에서는 다음 내용을 다룹니다.

  • Google Apps Script HTML 서비스에서 Leaflet.js 설정

  • Google 스프레드시트의 데이터를 사용하여 마커 표시

  • 마커 이동 시 시트 행 업데이트

  • 지도에서 새 마커를 만들고 시트에 저장

  • 웹 앱에서 마커 삭제

Google Apps Script HTML 서비스에서 Leaflet.js 설정

Leaflet.js는 가장 인기 있는 오픈 소스 매핑 라이브러리 중 하나입니다. 가볍고 사용하기 쉬우며 훌륭한 문서가 포함되어 있습니다. 배경 이미지를 제공할 수 있는 "CRS.Simple" 또는 좌표 참조 시스템을 포함하여 다양한 지도 유형을 지원합니다.

Google 스프레드시트 설정

다음 구조를 사용하여 map_pin이라는 시트를 생성하여 시작합니다.

id title x y
1 test1 10 30
2 test2 50 80

Kemudian buka Skrip Aplikasi daripada menu Sambungan.

Mencipta Fail HTML

Mula-mula, kita akan mulakan dengan contoh asas daripada dokumen Risalah, hanya untuk membolehkan perpustakaan berfungsi. Anda boleh melihat contoh penuh dalam panduan permulaan pantas mereka, di sini.

Tambahkan Fail HTML baharu bernama Index, dan tetapkan kandungannya kepada:



  <title>Quick Start - Leaflet</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css">
  <style>
    #map {
      height: 400px;
    }
  </style>


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

  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([40.73, -73.99], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© OpenStreetMap'
    }).addTo(map);

    var marker = L.marker([40.73, -73.99]).addTo(map)
      .bindPopup('Test Popup Message')
      .openPopup();
  </script>


Kemudian kemas kini fail Code.gs dengan:

function doGet() {
  const html = HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Map with Draggable Points')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return html;
}

Simpan, kemudian klik Gunakan, dan terbitkan sebagai apl web. Kemudian buka pautan untuk penempatan baharu dan anda akan melihat Leaflet.js memaparkan peta di New York.

Building an Interactive XY Image Plot with Google Apps Script and Leaflet.js

Ok, itu contoh peta biasa menggunakan Risalah. Sekarang beralih kepada jenis peta CRS.Simple, yang membolehkan membekalkan imej latar belakang.

Kemas kini HTML dengan contoh ini daripada Tutorial Risalah.



  <title>CRS Simple Example - Leaflet</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css">
  <style>
    #map {
      height: 400px;
      width: 600px;
    }
    body {
      margin: 0;
      padding: 0;
    }
  </style>


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

  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
  <script>
    // Set up the map with a simple CRS (no geographic projection)
    var map = L.map('map', {
      crs: L.CRS.Simple,
      minZoom: -1,
      maxZoom: 4
    });

    // Define the dimensions of the image
    var bounds = [[0, 0], [1000, 1000]];
    var image = L.imageOverlay('https://leafletjs.com/examples/crs-simple/uqm_map_full.png', bounds).addTo(map);

    // Set the initial view of the map to show the whole image
    map.fitBounds(bounds);

    // Optional: Add a marker or other elements to the map
    var marker = L.marker([500, 500]).addTo(map)
      .bindPopup('Center of the image')
      .openPopup();
  </script>


Di sini kami membekalkan imej 1000 x 1000 piksel, kemudian menetapkan penanda tengah pada 500, 500.

Klik Simpan, kemudian Gunakan>Ujian Penggunaan, untuk melihat jenis peta baharu. Anda kini sepatutnya mempunyai peta dengan imej latar belakang dan penanda diplot di tengah.

Building an Interactive XY Image Plot with Google Apps Script and Leaflet.js

Memulakan Peta dengan Data daripada Helaian Google

Seterusnya, kami akan menggunakan data daripada helaian untuk mengisi set penanda pada peta.

Mula-mula, tambahkan fungsi pada fail Code.gs untuk mendapatkan lokasi penanda:

function getPinData(){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sh = ss.getSheetByName('map_pin');
  const data = sh.getDataRange().getValues();
  const json = arrayToJSON(data);
  //Logger.log(json);
  return json
}

function arrayToJSON(data=getPinData()){
  const headers = data[0];
  const rows = data.slice(1);
  let jsonData = [];
  for(row of rows){
    const obj = {};
    headers.forEach((h,i)=>obj[h] = row[i]);
    jsonData.push(obj)
  }
  //Logger.log(jsonData)
  return jsonData
}

Di sini saya mengembalikan pin sebagai JSON supaya lebih mudah digunakan dalam HTML di bahagian seterusnya.

Sekarang tambahkan fungsi pada HTML untuk menggelungkan JSON ini dan mencipta pin peta selepas peta dimuatkan.

// Add map pins from sheet data
    google.script.run.withSuccessHandler(addMarkers).getPinData();

    function addMarkers(mapPinData) {
      mapPinData.forEach(pin => {
        const marker = L.marker([pin.x, pin.y], {
          draggable: true
        }).addTo(map);

        marker.bindPopup(`<b>${pin.title}`).openPopup();

        marker.on('dragend', function(e) {
          const latLng = e.target.getLatLng();
          console.log(`Marker ${pin.title} moved to: ${latLng.lat}, ${latLng.lng}`);
        });
      });
    }
</b>

Simpan, dan kemudian buka penggunaan ujian. Anda kini sepatutnya mempunyai penanda yang dijana daripada data helaian anda!

Building an Interactive XY Image Plot with Google Apps Script and Leaflet.js

Setiap pin mempunyai pop timbul dengan tajuk daripada baris itu. Pin boleh diseret pada ketika ini, tetapi kami masih memerlukan fungsi untuk menyimpan kedudukan baharu.

Menyimpan Kedudukan Penanda Apabila Diseret

Untuk menyimpan kedudukan baharu, kami memerlukan dua fungsi: satu dalam HTML untuk menangkap acara pada bahagian klien dan satu untuk menyimpan kedudukan baharu pada bahagian pelayan, dalam fail Code.gs.

Kemas kini HTML dengan:

    function addMarkers(mapPinData) {
      mapPinData.forEach(pin => {
        const { id, title, x, y } = pin;
        const marker = L.marker([x, y], {
          draggable: true
        }).addTo(map);

        marker.bindPopup(`<b>${title}</b>`).openPopup();

        marker.on('dragend', function(e) {
          const latLng = e.target.getLatLng();
          console.log(`Marker ${title} moved to: ${latLng.lat}, ${latLng.lng}`);
          saveMarkerPosition({ id, title, lat: latLng.lat, lng: latLng.lng });
        });
      });
    }

    function saveMarkerPosition({ id, title, lat, lng }) {
      google.script.run.saveMarkerPosition({ id, title, lat, lng });
    }

Dan kemudian tambahkan fungsi pada fail Code.gs untuk menyimpan lokasi:

function saveMarkerPosition({ id, lat, lng }) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sh = ss.getSheetByName('map_pin');
  const data = sh.getDataRange().getValues();

  for (let i = 1; i 



<p>Simpan dan muat semula penggunaan ujian. Anda kini sepatutnya melihat kemas kini helaian apabila penanda diseret!</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172580614176490.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building an Interactive XY Image Plot with Google Apps Script and Leaflet.js"></p>

<h2>
  
  
  Menambah Mata Baharu
</h2>

<p>Kami kini boleh mengalihkan mata sedia ada, tetapi bagaimana pula dengan menambah yang baharu? Sekali lagi, kami memerlukan dua fungsi, satu dalam HTML dan satu dalam fail Code.gs.</p>

<p>Mula-mula, tambahkan fungsi pada HTML untuk membuka gesaan apabila pengguna mengklik tempat kosong pada peta dan menghantar nilai kepada fungsi pelayan.<br>
</p>

<pre class="brush:php;toolbar:false">    // Function to add a new pin
    map.on('click', function(e) {
      const latLng = e.latlng;
      const title = prompt('Enter a title for the new pin:');
      if (title) {
        google.script.run.withSuccessHandler(function(id) {
          addNewMarker({ id, title, lat: latLng.lat, lng: latLng.lng });
        }).addNewPin({ title, lat: latLng.lat, lng: latLng.lng });
      }
    });

    function addNewMarker({ id, title, lat, lng }) {
      const marker = L.marker([lat, lng], {
        draggable: true
      }).addTo(map);

      marker.bindPopup(`<b>${title}</b>`).openPopup();

      marker.on('dragend', function(e) {
        const latLng = e.target.getLatLng();
        saveMarkerPosition({ id, title, lat: latLng.lat, lng: latLng.lng });
      });
    }

Kemudian tambahkan fungsi pada Code.gs untuk menyimpan baris baharu.

function addNewPin({ title, lat, lng }) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sh = ss.getSheetByName('map_pin');

  // Check if there are any rows present, if not initialize ID
  const lastRow = sh.getLastRow();
  let newId = 1;

  if (lastRow > 0) {
    const lastId = sh.getRange(lastRow, 1).getValue();
    newId = lastId + 1;
  }

  sh.appendRow([newId, title, lat, lng]);

  return newId;
}

Simpan sekali lagi dan muat semula penggunaan ujian. Kini apabila anda mengklik tempat kosong, anda boleh memasukkan tajuk dan menyimpan penanda baharu!

Building an Interactive XY Image Plot with Google Apps Script and Leaflet.js

Memadam Penanda

Akhir sekali, kami harus menambah cara untuk memadamkan penanda, memberikan kami apl CRUD penuh dalam paparan peta.

Kemas kini fungsi penanda tambah untuk memberi pop timbul butang padam:

      const popupContent = `<b>${title}</b><br><button onclick="deleteMarker(${id})">Delete Marker</button>`;
      marker.bindPopup(popupContent).openPopup();

Dan kemudian tambah fungsi untuk memadam dari sisi klien:

// Function to delete a marker
  function deleteMarker(id) {
    const confirmed = confirm('Are you sure you want to delete this marker?');
    if (confirmed) {
      google.script.run.withSuccessHandler(() => {
        // Refresh the markers after deletion
        google.script.run.withSuccessHandler(addMarkers).getPinData();
      }).deleteMarker(id);
    }
  }

Kemudian tambahkan fungsi padanan pada fail Code.gs:

function deleteMarker(id) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sh = ss.getSheetByName('map_pin');
  const data = sh.getDataRange().getValues();

  for (let i = 1; i 



<h2>
  
  
  Apa Seterusnya?
</h2>

<p>Ada banyak lagi yang boleh anda lakukan dari sini, seperti menambahkan titik data lain pada setiap penanda, imej latar belakang dinamik atau interaksi klik dan seret yang lain. Anda juga boleh membuat permainan! Ada idea untuk use case? Tinggalkan komen di bawah!</p>


          

            
        

Atas ialah kandungan terperinci Membina Plot Imej XY Interaktif dengan Skrip Google Apps dan Leaflet.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Masa Depan Python dan JavaScript: Trend dan RamalanMasa Depan Python dan JavaScript: Trend dan RamalanApr 27, 2025 am 12:21 AM

Trend masa depan Python dan JavaScript termasuk: 1. Kedua -duanya akan terus mengembangkan senario aplikasi dalam bidang masing -masing dan membuat lebih banyak penemuan dalam prestasi.

Python vs JavaScript: Persekitaran dan Alat PembangunanPython vs JavaScript: Persekitaran dan Alat PembangunanApr 26, 2025 am 12:09 AM

Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.

Adakah JavaScript ditulis dalam C? Memeriksa buktiAdakah JavaScript ditulis dalam C? Memeriksa buktiApr 25, 2025 am 12:15 AM

Ya, teras enjin JavaScript ditulis dalam C. 1) Bahasa C menyediakan prestasi yang efisien dan kawalan asas, yang sesuai untuk pembangunan enjin JavaScript. 2) Mengambil enjin V8 sebagai contoh, terasnya ditulis dalam C, menggabungkan kecekapan dan ciri-ciri berorientasikan objek C. 3) Prinsip kerja enjin JavaScript termasuk parsing, penyusun dan pelaksanaan, dan bahasa C memainkan peranan penting dalam proses ini.

Peranan JavaScript: Membuat Web Interaktif dan DinamikPeranan JavaScript: Membuat Web Interaktif dan DinamikApr 24, 2025 am 12:12 AM

JavaScript adalah di tengah -tengah laman web moden kerana ia meningkatkan interaktiviti dan dinamik laman web. 1) Ia membolehkan untuk menukar kandungan tanpa menyegarkan halaman, 2) memanipulasi laman web melalui Domapi, 3) menyokong kesan interaktif kompleks seperti animasi dan drag-and-drop, 4) mengoptimumkan prestasi dan amalan terbaik untuk meningkatkan pengalaman pengguna.

C dan JavaScript: Sambungan dijelaskanC dan JavaScript: Sambungan dijelaskanApr 23, 2025 am 12:07 AM

C dan JavaScript mencapai interoperabilitas melalui webassembly. 1) Kod C disusun ke dalam modul WebAssembly dan diperkenalkan ke dalam persekitaran JavaScript untuk meningkatkan kuasa pengkomputeran. 2) Dalam pembangunan permainan, C mengendalikan enjin fizik dan rendering grafik, dan JavaScript bertanggungjawab untuk logik permainan dan antara muka pengguna.

Dari laman web ke aplikasi: Aplikasi pelbagai JavaScriptDari laman web ke aplikasi: Aplikasi pelbagai JavaScriptApr 22, 2025 am 12:02 AM

JavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.

Python vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanPython vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanApr 21, 2025 am 12:01 AM

Python lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.

Peranan C/C dalam JavaScript Jurubah dan PenyusunPeranan C/C dalam JavaScript Jurubah dan PenyusunApr 20, 2025 am 12:01 AM

C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).