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 jika path adalah satu-satunya properti yang diperlukan, objek Symbol mendukung berbagai properti yang memungkinkan Anda menyesuaikan aspek visual, seperti warna dan 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 menentukan 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 isi 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 pengisian 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. Setelan 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 diskalakan, ukuran simbol bisa berapa saja. Untuk simbol pada polyline, skala defaultnya adalah bobot goresan polyline. Setelah diskalakan, simbol harus diletakkan dalam segi empat 22x22px, yang berpusat di jangkar simbol tersebut.
  • strokeColor adalah warna garis batas simbol. Semua warna CSS3 didukung, kecuali tambahan warna yang dinamai. Untuk simbol pada penanda, defaultnya adalah 'hitam'. Untuk simbol pada polyline, warna defaultnya adalah warna goresan polyline.
  • strokeOpacity menentukan opasitas relatif (yaitu, kurangnya transparansi) guratan 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 pada 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 menghadap ke depan dianggap sebagai arah ujung polyline.

Anda dapat memodifikasi guratan atau isian 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 pada penanda, teruskan literal objek Symbol dengan jalur yang diinginkan ke properti icon penanda. Contoh berikut menggunakan notasi jalur SVG untuk membuat ikon khusus bagi penanda.

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Menambahkan simbol ke polyline

Untuk menampilkan simbol pada 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 berupa 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 berupa persentase panjang garis (misalnya, '50%') atau dalam piksel (misalnya, '50px'). Untuk menonaktifkan pengulangan ikon, tetapkan '0'. Nilai defaultnya adalah '0'.

Dengan kombinasi simbol dan class PolylineOptions, Anda memiliki banyak kontrol 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 opaque 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

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
Lihat contoh

Mencoba Contoh