Penanda lanjutan menggunakan dua class untuk menentukan penanda: class AdvancedMarkerElement
menyediakan parameter dasar (position
,
title
, dan map
), dan class PinElement
berisi opsi untuk penyesuaian
lebih lanjut. Cuplikan berikut menampilkan 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
; setiap penyesuaian yang menggunakan class PinElement
harus diterapkan secara terprogram. Untuk melakukannya, kode Anda harus
mengambil elemen gmp-advanced-marker
dari halaman HTML. Cuplikan
berikut menampilkan kode untuk membuat kueri kumpulan elemen gmp-advanced-marker
,
lalu melakukan iterasi di seluruh hasil untuk menerapkan penyesuaian yang dideklarasikan di
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
- Menyembunyikan glyph
![Diagram yang menampilkan komponen Advanced Markers.](https://developers.google.cn/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?hl=id)
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 opsi
AdvancedMarkerElement.title
:
TypeScript
// 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',
});
JavaScript
// 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.03 },
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.03 },
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.02 },
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.02 },
content: pinGlyph.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.01 },
content: pinNoGlyph.element,
});
JavaScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
Atau, tetapkan PinElement.glyphColor
ke nilai yang sama dengan PinElement.background
.
Tindakan ini memiliki efek menyembunyikan glyph secara visual.
Langkah berikutnya:
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2024-06-26 UTC.
[]
[]