Saya mahu membina halaman HTML di mana pelanggan boleh membina peta peribadi mereka. Saya menggunakan Mapbox untuk mencipta ini. Terdapat tindanan di atas peta ini dan pelanggan juga boleh meletakkan penanda pada peta. Tetapi saya sedang bergelut dengan dua masalah besar:

1. Cara mendapatkan imej peta berkualiti tinggi termasuk tindanan dan penanda. Kerana saya ingin mencetaknya di poster.

2. Bagaimana saya boleh melaksanakan logik ini di kedai online saya supaya selepas pelanggan mengklik "Simpan" dan membuat pembelian, imej ini akan dihantar ke pelayan saya supaya saya boleh mencetaknya.

https://www.cartida.de/map/ (Logiknya sepatutnya seperti ini) https://midi-hazel-palm.glitch.me/ (ketika ini kelihatan seperti ini)

Saya menulis kod ini untuk memuat turun peta:

function downloadMap() {
    // Get the canvas element that represents the current map view
    var canvas = map.getCanvas();

    // Create a temporary link element
    var link = document.createElement('a');
    link.download = 'map.png';
    link.href = canvas.toDataURL('image/png');

    // Add the link element to the document and click it to trigger the download
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

Tetapi tindanan dan penanda tidak ditambah.

Terima kasih. Kami berharap untuk mendengar daripada anda.

Saya mahukan imej berkualiti tinggi Mapbox API dalam format Html