Ringkasan
Anda dapat menata gaya isi dan goresan untuk poligon batas dengan menetapkan properti style
pada lapisan fitur ke google.maps.FeatureStyleFunction
, yang dapat Anda gunakan untuk menentukan atribut gaya untuk warna, opasitas, dan ketebalan garis.
Untuk menata gaya poligon, tetapkan properti style
ke google.maps.FeatureStyleFunction
. Fungsi gaya adalah ketika Anda menentukan logika untuk menata gaya setiap poligon di lapisan fitur. Jika
featureLayer.style
ditetapkan, fungsi gaya dijalankan pada setiap fitur di lapisan fitur yang terpengaruh. Fungsi ini diterapkan saat Anda menetapkan properti gaya. Untuk memperbaruinya, Anda harus menetapkan properti gaya lagi.
Fungsi gaya harus selalu menampilkan hasil yang konsisten saat diterapkan pada fitur. Misalnya, jika Anda ingin mewarnai sekumpulan fitur secara acak, bagian acak tersebut tidak boleh terjadi di fungsi gaya fitur karena akan menyebabkan hasil yang tidak diinginkan.
Karena fungsi ini berjalan di setiap fitur dalam lapisan, pengoptimalan harus dilakukan. Agar tidak memengaruhi waktu rendering:
- Aktifkan hanya lapisan yang Anda perlukan.
- Tetapkan
style
kenull
saat lapisan tidak lagi digunakan.
Untuk menata gaya poligon di lapisan fitur lokalitas, lakukan langkah-langkah berikut:
- Jika Anda belum melakukannya, ikuti langkah-langkah di bagian Memulai untuk membuat gaya peta dan ID peta baru. Pastikan untuk mengaktifkan lapisan fitur Lokalitas.
Dapatkan referensi ke lapisan fitur lokalitas saat peta melakukan inisialisasi.
featureLayer = map.getFeatureLayer("LOCALITY");
Buat definisi gaya dari jenis
google.maps.FeatureStyleFunction
.Tetapkan properti
style
di lapisan fitur keFeatureStyleFunction
. Contoh berikut menunjukkan cara penentuan fungsi untuk menerapkan gaya hanya kegoogle.maps.Feature
dengan ID tempat yang cocok:TypeScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } };
JavaScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } };
Jika ID tempat yang ditentukan tidak ditemukan, atau tidak cocok dengan jenis fitur yang dipilih, gaya tidak akan diterapkan. Misalnya, jika Anda mencoba menetapkan gaya di lapisan POSTAL_CODE
yang cocok dengan ID tempat untuk "New York City", maka gaya tidak akan diterapkan.
Menghapus gaya visual dari lapisan
Untuk menghapus gaya visual dari lapisan, tetapkan style
ke null
:
featureLayer.style = null;
Mencari ID tempat untuk menarget fitur
Untuk mendapatkan data wilayah:
- Buat permintaan pencarian wilayah untuk menelusuri wilayah.
- Dapatkan data dari peristiwa klik (menampilkan Fitur yang sesuai dengan wilayah yang diklik, serta memberikan akses ke ID tempat, nama tampilan, dan kategori jenis fitur untuk wilayah tersebut).
Gunakan Region Coverage Viewer untuk melihat Batas Google yang tersedia untuk semua wilayah yang didukung.
Cakupan bervariasi menurut wilayah. Lihat cakupan batas Google untuk mengetahui detailnya.
Nama geografis tersedia dari banyak sumber, seperti USGS Board on Geographic Names, dan US Gazetteer Files.
Kode contoh lengkap
TypeScript
let map: google.maps.Map; //@ts-ignore let featureLayer; function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: { lat: 20.773, lng: -156.01 }, // Hana, HI zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer('LOCALITY'); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } }; } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; //@ts-ignore let featureLayer; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: 20.773, lng: -156.01 }, zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer("LOCALITY"); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } }; } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Boundaries Simple</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta" defer ></script> </body> </html>