Membuat penanda peta Google animasi dengan CSS dan JavaScript

Biarkan tag Peta Google anda bergerak: Kegunaan indah animasi CSS

API Google Maps menyediakan alat yang mudah untuk pemaju web, tetapi tanda petanya kurang dalam fleksibiliti dan kreativiti. Artikel ini akan menunjukkan cara menggabungkan CSS dan JavaScript untuk membuat penanda peta animasi yang bertindak balas terhadap interaksi pengguna, menjadikan peta anda lebih jelas dan menarik.

mata teras:

API Peta Google berkuasa, tetapi penanda peta terbina dalam kekurangan fleksibiliti. Melalui gabungan CSS dan JavaScript yang bijak, kita boleh membuat penanda animasi yang lebih interaktif dan menarik secara visual.
Langkah -langkah utama untuk melaksanakan tag animasi termasuk: menambah imej tag, tetapan
• untuk menjadikan setiap tag sebagai elemen DOM bebas, mencipta optimized: false untuk mengatur semua tag, dan akhirnya menggunakan CSS untuk animasi. OverlayView
Untuk mengendalikan animasi markah yang lebih baik, kami boleh menambah toggles luaran, menambah animasi untuk interaksi pengguna seperti klik atau hover, dan juga menggunakan kesan animasi yang berbeza kepada pelbagai jenis tanda untuk meningkatkan pengalaman pengguna.

API Peta Google mencipta pengalaman pengguna yang sangat baik dengan hanya beberapa baris kod dengan fungsi terbina dalamnya yang kuat. Walau bagaimanapun, ia mempunyai kelemahan yang jelas dalam menyesuaikan penanda peta: kekurangan fleksibiliti dan kreativiti.

Walaupun anda boleh menambah imej penanda tersuai, petua, dan tag, ini adalah interaksi statik, tekstual yang kelihatan berantakan apabila terdapat banyak titik penandaan pada peta. Pada masa ini tidak ada cara standard untuk membuat tag interaktif yang bertindak balas terhadap tindakan pengguna.

Untuk menyelesaikan masalah ini, saya meneroka satu cara untuk membuat peta yang benar -benar unik, iaitu menambah animasi CSS3 ke tanda peta anda dan biarkan mereka melompat, berputar, atau bersembunyi untuk meningkatkan visual.

Apabila pengguna melayang di atas tanda, klik pada tanda, atau gunakan butang togol di luar peta, anda boleh menggunakan animasi CSS untuk membuat langkah Mark. Panduan ini akan memberi tumpuan kepada strategi mudah yang boleh anda gunakan untuk mana -mana projek. (Dua contoh Ryan Connolly dan Felipe Figueroa menggunakan pendekatan yang sama.)

Berikut adalah contoh mudah penanda animasi. Kucing Cheshire yang terkenal adalah penanda untuk tiga lokasi yang berbeza di Massachusetts, anda boleh menukar animasinya menggunakan butang togol di sudut kanan atas:

Codepen Sample Link

Langkah -langkah asas:

Langkah -langkah berikut akan membimbing anda untuk menambah fungsi animasi CSS ke tanda peta:

Langkah 1: Tambahkan imej yang ditandakan

tentukan gambar anda dengan kod berikut:

var catIcon = {
    url: myImageURLhere,
    size: new google.maps.Size(70, 60),
    scaledSize: new google.maps.Size(70, 60),
    origin: new google.maps.Point(0,0)
};

Langkah 2: Tetapkan

optimized: false Ini membolehkan anda menjadikan setiap penanda sebagai elemen DOM bebas:

var catIcon = {
    url: myImageURLhere,
    size: new google.maps.Size(70, 60),
    scaledSize: new google.maps.Size(70, 60),
    origin: new google.maps.Point(0,0)
};

Langkah 3: Buat OverlayView

ini akan mengatur semua penanda dalam satu panel supaya anda dapat mengaksesnya dari dom:

var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: catIcon,
    optimized: false
});

Dalam baris getPanes(), anda boleh menetapkan ID ke lapisan tag untuk menggunakannya dalam CSS. Ini OverlayView secara automatik akan mengumpulkan mana -mana penanda yang tidak berada dalam lapisan lain. Dalam kes ini, tiada lapisan lain, jadi ia mengumpul semua penanda.

Langkah 4: Tambah animasi menggunakan CSS

ini boleh menjadi animasi satu kali atau animasi berterusan:

var myoverlay = new google.maps.OverlayView();
myoverlay.draw = function() {
    this.getPanes().markerLayer.id = 'markerLayer';
};
myoverlay.setMap(map);

pilihan fleksibel:

Langkah -langkah di atas akan segera menghidupkan semua penanda. Berikut adalah beberapa cara yang lebih halus untuk mengawal markup animasi:

• Suis luaran: Menggunakan pengendali JQuery .click(), anda boleh dengan mudah mengawal paparan dan menyembunyikan animasi, atau mengubah kesan animasi dari tag yang berbeza.

• klik/hoover: dengan membuat array global untuk menyimpan semua tag dan menambah atribut title yang unik untuk setiap tag, anda boleh menghidupkan peristiwa klik dan hover.

• Animasi yang berbeza dari jenis penanda yang berbeza: Gunakan pemilih CSS untuk memohon animasi yang berbeza kepada pelbagai jenis penanda mengikut atribut src imej penanda.

Ringkasan:

Sebagai pemaju atau pereka, matlamat utama anda adalah untuk mencipta produk yang pengguna suka. Pengguna telah terdedah kepada banyak produk Google Maps, dan sudah tiba masanya untuk membuat peta anda menonjol!

anda boleh menggunakan animasi tanda peta untuk meningkatkan pengalaman pengguna dengan menggunakan kaedah berikut:

• Untuk imej penanda yang serupa dengan objek bergerak sebenar (seperti kucing), mereka boleh ditambah dengan animasi CSS yang sepadan dengan gerakan semulajadi.
• untuk imej penanda (seperti kedai) yang tidak mempunyai mobiliti tradisional, animasi yang menjadikannya kelihatan bertindak balas terhadap klik pengguna, seperti melompat atau kegelisahan.
• Jika data anda sepadan dengan setiap tag, anda boleh membuat tag bertindak berdasarkan data. Sebagai contoh, untuk persimpangan yang sibuk, tanda seru yang berkelip boleh ditambah di atasnya.

cuba dan tunggu pengguna memuji kerja anda!

FAQs:

(Kandungan FAQS yang disediakan dalam teks asal harus ditambah di sini, dan penulisan semula pseudo-asal yang sepadan harus dijalankan untuk mengekalkan konsistensi kandungan dan mengelakkan pertindihan.)

Atas ialah kandungan terperinci Membuat penanda peta Google animasi dengan CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!