Как задать стиль территории, ограниченной многоугольником

Выберите платформу: Android iOS JavaScript

Обзор

Чтобы настроить стиль заливки и контура многоугольника границы, определите атрибуты стиля с помощью FeatureStyleOptions и задайте для свойства style на слое объектов значение google.maps.FeatureStyleFunction (в этой функции содержится логика стиля).

Ниже показан пример карты, на которой выделен многоугольник границы одного региона.

Чтобы применить стиль к объектам границ, задайте для свойства style значение google.maps.FeatureStyleFunction – в этой функции может содержаться логика стиля. Функция FeatureStyleFunction выполняется для каждого объекта на указанном слое объектов – это происходит в тот момент, когда вы присваиваете это значение свойству style. Чтобы изменить ее, нужно снова задать это свойство.

Чтобы задать один стиль для всех объектов на слое, укажите для style значение google.maps.FeatureStyleOptions. В этом случае использовать функцию FeatureStyleFunction не нужно, потому что не требуется определять логику.

Каждое применение функции стиля к объектам должно приводить к одинаковым результатам. Например, если вы хотите покрасить набор объектов случайными цветами, часть кода, с помощью которой они выбираются, должна находиться за пределами функции стиля объектов, поскольку иначе результат будет отличаться от предполагаемого.

Эта функция обрабатывает все объекты на слое, поэтому важную роль играет оптимизация. Чтобы время отрисовки не увеличивалось:

  • Включите только нужные слои.
  • Если слой не используется, установите для свойства style значение null.

Чтобы применить стиль к многоугольнику на слое объектов населенного пункта:

  1. Если вы этого ещё не сделали, создайте новый идентификатор карты и стиль карты, следуя инструкциям в статье Начало работы. Обязательно включите слой объектов Населенный пункт.

  2. Получите ссылку на слой объектов населенного пункта после инициализации карты.

    TypeScript

    // Get the feature layer.
featureLayer = innerMap.getFeatureLayer('LOCALITY');

    JavaScript

    // Get the feature layer.
featureLayer = innerMap.getFeatureLayer('LOCALITY');

  3. Создайте определение стиля типа google.maps.FeatureStyleFunction.

  4. Для свойства style задайте значение FeatureStyleFunction. В примере ниже показано, как определить функцию, чтобы применить стиль только к google.maps.Feature с указанным идентификатором места.

    TypeScript

    // Define a style with purple fill and border.
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.
featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
    const feature = options.feature as google.maps.PlaceFeature;
    if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
        // Hana, HI
        return featureStyleOptions;
    }
    return null;
};

    JavaScript

    // Define a style with purple fill and border.
const featureStyleOptions = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: '#810FCB',
    fillOpacity: 0.5,
};

// Apply the style to a single boundary.
featureLayer.style = (options) => {
    const feature = options.feature;
    if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
        // Hana, HI
        return featureStyleOptions;
    }
    return null;
};

Если указанный идентификатор места не найден или не соответствует выбранному типу объекта, стиль не применяется. Например, применить стиль к слою POSTAL_CODE, указав идентификатор места "Нью-Йорк", не получится.

Как удалить стиль из слоя

Чтобы удалить примененный стиль из слоя, задайте для параметра style значение null:

featureLayer.style = null;

Как найти идентификаторы места для целевых объектов

Чтобы получить идентификаторы мест для регионов:

Покрытие зависит от региона. Подробнее об административных границах…

Географические названия доступны из множества разных источников, например из данных Совета США по географическим названиям и географических справочников США.

Полный пример кода

TypeScript

let featureLayer: google.maps.FeatureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    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.
    featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
        const feature = options.feature as google.maps.PlaceFeature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();

JavaScript

let featureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        const feature = options.feature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-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>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>