Simbol (Ikon Berbasis Vektor)

1. Pengantar
2. Properti simbol
3. Simbol yang sudah ditentukan
4. Menambahkan simbol ke penanda
5. Menambahkan simbol ke polyline
6. Menganimasikan simbol

Pengantar

Symbol adalah ikon berbasis vektor yang dapat ditampilkan pada objek Marker atau Polyline . Bentuk simbol ditentukan oleh jalur menggunakan notasi jalur SVG. Meskipun path adalah satu-satunya properti yang diperlukan, objek Symbol mendukung berbagai properti yang memungkinkan Anda menyesuaikan aspek visual, seperti warna serta ketebalan goresan dan isian. Lihat daftar properti.

Beberapa simbol yang telah ditetapkan tersedia melalui class SymbolPath. Lihat daftar di bawah.

Properti simbol

Perhatikan bahwa perilaku default Symbol sedikit berbeda bergantung pada apakah simbol muncul di penanda atau polyline. Varian-varian ini dijelaskan dalam daftar properti di bawah ini.

Symbol mendukung properti berikut:

• path (diperlukan) adalah jalur yang menentukan bentuk simbol. Anda dapat menggunakan salah satu jalur yang telah ditetapkan di google.maps.SymbolPath atau menetapkan jalur kustom menggunakan notasi jalur SVG. Jalur vektor pada polyline harus muat dalam 22x22 px persegi. Jika jalur Anda menyertakan titik di luar persegi ini, Anda harus menyesuaikan properti scale simbol ke nilai pecahan, seperti 0,2, sehingga titik berskala yang dihasilkan dapat muat dalam persegi ini.
• anchor menetapkan posisi simbol sesuai dengan penanda atau polyline. Koordinat jalur simbol masing-masing diterjemahkan ke kiri dan ke atas berdasarkan koordinat x dan y anchor. Secara default, simbol ditambatkan pada (0, 0). Posisi dinyatakan dalam sistem koordinat yang sama seperti jalur simbol tersebut.
• fillColor adalah warna pengisi simbol (yaitu, wilayah yang dibatasi dengan goresan). Semua warna CSS3 didukung, kecuali tambahan warna yang dinamai. Untuk simbol pada penanda, defaultnya adalah 'hitam'. Untuk simbol pada polyline, defaultnya adalah warna goresan polyline yang bersangkutan.
• fillOpacity mendefinisikan opasitas relatif (yaitu, kurangnya transparansi) dari pengisi simbol. Nilainya berkisar dari 0.0 (sepenuhnya transparan) hingga 1.0 (sepenuhnya tidak tembus pandang). Nilai defaultnya adalah 0.0.
• rotation adalah sudut yang digunakan untuk memutar simbol, yang dinyatakan searah jarum jam dalam derajat. Secara default, penanda simbol memiliki rotasi 0, dan simbol pada polyline diputar oleh sudut dari tepi letaknya. Menentukan rotasi simbol pada polyline akan menetapkan rotasi simbol sedemikian rupa, sehingga tidak lagi mengikuti lekuk garis.
• scale menetapkan jumlah yang digunakan untuk menskalakan ukuran simbol. Untuk penanda simbol, skala defaultnya adalah 1. Setelah penskalaan, ukuran simbol bisa berapa saja. Untuk simbol pada polyline, skala defaultnya adalah bobot goresan polyline. Setelah penskalaan, simbol harus diletakkan di dalam persegi 22x22 piksel, yang berpusat di titik tambatan simbol tersebut.
• strokeColor adalah warna garis batas simbol. Semua warna CSS3 didukung, kecuali tambahan warna yang dinamai. Untuk simbol pada penanda, warna defaultnya adalah 'hitam'. Untuk simbol di polyline, warna defaultnya adalah warna goresan polyline.
• strokeOpacity menentukan opasitas relatif (yaitu, kurangnya transparansi) goresan simbol. Nilainya berkisar dari 0.0 (sepenuhnya transparan) hingga 1.0 (sepenuhnya tidak tembus pandang). Untuk penanda simbol, nilai defaultnya adalah 1.0. Untuk simbol di polyline, defaultnya adalah opasitas goresan polyline.
• strokeWeight menentukan bobot garis batas simbol. Nilai defaultnya adalah scale simbol.

Simbol yang sudah ditentukan

Maps JavaScript API menyediakan beberapa simbol bawaan yang dapat Anda tambahkan ke penanda atau polyline melalui class SymbolPath.

Simbol default berisi sebuah lingkaran dan dua jenis panah. Tersedia panah yang menghadap ke depan dan ke belakang. Hal ini khususnya berguna untuk polyline, karena orientasi simbol pada polyline adalah tetap. Panah yang menghadap ke depan dianggap sebagai arah ujung polyline.

Anda dapat memodifikasi goresan atau pengisi simbol yang sudah ditentukan dengan salah satu opsi simbol default.

Simbol yang sudah ditentukan berikut ini telah disertakan:

Nama	Deskripsi	Contoh
google.maps.SymbolPath.CIRCLE	Lingkaran.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW	Panah menunjuk ke belakang yang tertutup pada semua sisinya.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW	Panah menunjuk ke depan yang tertutup pada semua sisinya.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW	Panah menunjuk ke belakang yang terbuka pada satu sisi.
google.maps.SymbolPath.FORWARD_OPEN_ARROW	Panah menunjuk ke depan yang terbuka pada satu sisi.

Menambahkan simbol ke penanda

Untuk menampilkan ikon berbasis vektor di AdvancedMarkerElement, gunakan elemen XML SVG. Contoh berikut menunjukkan cara menambahkan elemen XML SVG ke AdvancedMarkerElement.

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);
index.ts

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);
index.js

Penanda mendukung penggunaan gambar raster serta gambar vektor. Lihat Membuat penanda dengan grafik.

Menambahkan simbol ke polyline

Untuk menampilkan simbol di polyline, tetapkan properti icons[] dari objek PolylineOptions. Array icons[] menggunakan satu atau beberapa literal objek IconSequence, dengan properti berikut:

• icon (diperlukan) adalah simbol yang akan dirender pada garis.
• offset menentukan jarak dari awal garis tempat ikon akan dirender. Jarak ini mungkin dinyatakan dalam persentase panjang garis (misalnya, '50%') atau dalam piksel (misalnya, '50px'). Nilai defaultnya adalah '100%'.
• repeat menentukan jarak antara ikon yang berurutan pada garis. Jarak ini mungkin dinyatakan dalam persentase panjang garis (misalnya, '50%') atau dalam piksel (misalnya, '50px'). Untuk menonaktifkan pengulangan ikon, tetapkan '0'. Nilai defaultnya adalah '0'.

Catatan: Jika polyline Anda merupakan geodesi (yaitu, jika properti geodesic ditetapkan ke true), jarak yang ditentukan untuk offset dan repeat dihitung dalam meter secara default. Menetapkan offset atau repeat ke nilai piksel akan menyebabkan jarak dihitung dalam piksel pada layar.

Dengan kombinasi simbol dan class PolylineOptions, Anda memiliki kontrol yang besar terhadap tampilan dan nuansa polyline pada peta. Berikut beberapa contoh penyesuaian yang dapat Anda terapkan.

Panah

Gunakan properti IconSequence.offset untuk menambahkan panah ke awal atau akhir polyline.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Lihat contoh

Garis putus-putus

Anda bisa mendapatkan efek garis putus-putus dengan menetapkan opasitas polyline ke 0, dan menempatkan simbol buram di atas garis dengan interval teratur.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Lihat contoh

Jalur kustom

Simbol kustom memungkinkan Anda menambahkan banyak bentuk yang berbeda ke polyline.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Lihat contoh

Menganimasikan simbol

Anda dapat menganimasikan simbol di sepanjang jalur menggunakan fungsi window.setInterval() DOM untuk mengubah offset simbol pada interval tetap.

TypeScript

// This example adds an animated symbol to a polyline.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 20.291, lng: 153.027 },
      zoom: 6,
      mapTypeId: "terrain",
    }
  );

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.291, lng: 153.027 },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

window.initMap = initMap;
index.js

Catatan: JavaScript dikompilasi dari cuplikan TypeScript.

Lihat contoh