Обзор
Вы можете настроить стиль заливки и контура многоугольника, задав для свойства style
на слое объектов функцию google.maps.FeatureStyleFunction
, с помощью которой можно устанавливать такие атрибуты стиля, как цвет, прозрачность и толщина линии.
Чтобы применить стиль к многоугольнику, задайте для свойства style
функцию google.maps.FeatureStyleFunction
. В функции стиля можно указать логику для применения стиля к отдельным многоугольникам на слое объектов. После настройки featureLayer.style
функция стиля обрабатывает каждый объект на указанном слое объектов. Она применяется в тот момент, когда вы задаете свойство стиля. Чтобы изменить ее, нужно снова задать это свойство.
Каждое применение функции стиля к объектам должно приводить к одинаковым результатам. Например, если вы хотите покрасить набор объектов случайными цветами, часть кода, с помощью которой они выбираются, должна находиться за пределами функции стиля объектов, поскольку в противном случае ее применение будет давать непредвиденные результаты.
Эта функция обрабатывает все объекты на слое, поэтому важную роль играет оптимизация. Чтобы время отрисовки не увеличивалось:
- Включите только нужные слои.
- Если слой не используется, установите для свойства
style
значениеnull
.
Чтобы применить стиль к многоугольнику на слое объектов населенного пункта:
- Если вы этого ещё не сделали, создайте новый идентификатор карты и стиль карты, следуя инструкциям в статье Начало работы. Обязательно включите слой объектов Населенный пункт.
Получите ссылку на слой объектов населенного пункта после инициализации карты.
featureLayer = map.getFeatureLayer("LOCALITY");
Создайте определение стиля типа
google.maps.FeatureStyleFunction
.Задайте для свойства
style
на слое объектов функциюFeatureStyleFunction
. В примере ниже показано, как определить функцию, чтобы применить стиль только кgoogle.maps.Feature
с указанным идентификатором места.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; } };
Если указанный идентификатор места не будет найден или не будет соответствовать выбранному типу объекта, стиль применен не будет. Например, применить стиль к слою POSTAL_CODE
, указав идентификатор места "Нью-Йорк", не получится.
Как удалить стиль из слоя
Чтобы удалить примененный стиль из слоя, задайте для параметра style
значение null
:
featureLayer.style = null;
Как найти идентификаторы места для целевых объектов
Чтобы получить данные о регионе:
- Составьте запрос для поиска региона.
- Получите данные из событий кликов (будет возвращен объект, соответствующий выбранному региону, и вы сможете посмотреть его идентификатор места, отображаемое название и категорию типа объекта).
Используйте средство просмотра покрытия региона, чтобы узнать, какие административные границы заданы для поддерживаемых регионов в Google.
Покрытие зависит от региона. Подробнее об административных границах…
Географические названия доступны из множества разных источников, например из данных Совета США по географическим названиям и U.S. Gazetteer Files.
Полный пример кода
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>