Penanda lanjutan menggunakan dua class untuk menentukan penanda:
Class AdvancedMarkerElement
menyediakan parameter dasar (position
,
title
, dan map
), serta class PinElement
berisi opsi untuk
dan penyesuaian. Cuplikan berikut menunjukkan kode untuk membuat PinElement
baru,
lalu menerapkannya ke penanda.
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
Pada peta yang dibuat menggunakan HTML, parameter dasar untuk penanda dideklarasikan menggunakan
elemen HTML gmp-advanced-marker
; penyesuaian apa pun
yang menggunakan
Class PinElement
harus diterapkan secara terprogram. Untuk melakukannya, kode Anda harus
mengambil elemen gmp-advanced-marker
dari halaman HTML. Hal berikut
cuplikan menunjukkan kode untuk meminta kueri kumpulan elemen gmp-advanced-marker
,
lalu mengulangi hasil untuk menerapkan penyesuaian yang dideklarasikan dalam
PinElement
.
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
Halaman ini menampilkan cara menyesuaikan penanda dengan cara berikut:
- Menambahkan teks judul
- Menskalakan penanda
- Mengubah warna latar belakang
- Mengubah warna batas
- Mengubah warna glyph
- Menggunakan teks dalam glyph
- Menyembunyikan glyph
Menambahkan teks judul
Teks judul muncul saat kursor diarahkan ke penanda. Teks judul dapat dibaca oleh pembaca layar.
Untuk menambahkan teks judul secara terprogram, gunakan AdvancedMarkerElement.title
opsi:
// Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.03 }, title: "Title text for the marker at lat: 37.419, lng: -122.03", });
Untuk menambahkan teks judul ke penanda yang dibuat menggunakan HTML, gunakan atribut title
:
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
Menskalakan penanda
Untuk menskalakan penanda, gunakan opsi scale
.
TypeScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
JavaScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
Mengubah warna latar belakang
Gunakan opsi PinElement.background
untuk mengubah warna latar belakang penanda:
TypeScript
// Change the background color. const pinBackground = new PinElement({ background: '#FBBC04', }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
JavaScript
// Change the background color. const pinBackground = new PinElement({ background: "#FBBC04", }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
Mengubah warna batas
Gunakan opsi PinElement.borderColor
untuk mengubah warna batas penanda:
TypeScript
// Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.035 }, content: pinBorder.element, });
JavaScript
// Change the border color. const pinBorder = new PinElement({ borderColor: "#137333", }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.035 }, content: pinBorder.element, });
Mengubah warna glyph
Gunakan opsi PinElement.glyphColor
untuk mengubah warna glyph penanda:
TypeScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: 'white', }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.025 }, content: pinGlyph.element, });
JavaScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: "white", }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.025 }, content: pinGlyph.element, });
Menambahkan teks ke glyph
Gunakan opsi PinElement.glyph
untuk mengganti glyph default dengan karakter
teks. Glyph teks PinElement
diskalakan dengan PinElement
dan
warna default-nya cocok dengan glyphColor
default PinElement
.
TypeScript
const pinTextGlyph = new PinElement({ glyph: 'T', glyphColor: 'white', }); const markerViewGlyphText = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, });
JavaScript
const pinTextGlyph = new PinElement({ glyph: "T", glyphColor: "white", }); const markerViewGlyphText = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, });
Menyembunyikan glyph
Tetapkan opsi PinElement.glyph
ke string kosong untuk menyembunyikan glyph penanda:
TypeScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: "", }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, });
Atau, tetapkan PinElement.glyphColor
ke nilai yang sama dengan PinElement.background
.
Tindakan ini memiliki efek menyembunyikan glyph secara visual.