设置 LocalContextMapView 的样式

本部分介绍了如何通过应用自定义地图样式和自定义地图标记图标的外观,自定义 LocalContextMapView 地图的视觉外观。

应用自定义地图样式

您可以通过应用自定义样式来自定义 LocalContextMapView 地图的视觉外观。但请注意,LocalContextMapView 附带的默认样式不同于标准 Map

若要将 LocalContextMapView 默认样式完全替换为自定义样式(styles 用于保存自定义样式数组),请使用以下代码:

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

若要在 LocalContextMapView 默认样式的基础上使用自定义样式 (styles) 进行构建,请使用以下代码:

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});

自定义标记图标

您可以通过自定义图钉颜色、字形颜色和缩放比例(大小)来设置标记图标的视觉外观。请在初始化 LocalContextMapView 时执行此操作。您可以将这些值设置为静态对象(图标样式不会随着状态而发生改变)或动态函数(图标样式会在图标处于突出显示或选中状态时发生改变)。

  • 自定义样式会合并到默认样式之上。
  • 支持所有 CSS 颜色语法,包括 RGB、十六进制、HSL 和颜色关键字。
  • 缩放比例是一个数值,缩放比例 2 表示缩放比例 1 的两倍,以此类推。默认情况下,系统会针对图钉的不同状态设置不同的缩放比例值。缩放比例是绝对值,因此您传入的值不会根据默认值更改图钉大小,而是会替换默认值。例如,如果针对所有状态将缩放比例设置为 1,那么无论状态如何,图钉大小都会保持不变。

以静态方式设置标记图标的颜色和缩放比例

您可以为标记图标和字形设置默认的颜色和缩放比例。为此,请为 glyphColorbackground 指定颜色值,并为 pinOptionsSetup 中的 scale 指定数值。以下示例将图标设置为黑色,字形设置为白色,并将缩放比例增加到 2:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

以动态方式设置标记图标的颜色和缩放比例

若要根据状态(默认、已突出显示或已选择)为标记图标和字形设置默认颜色,请使用条件语句为各个状态设置所需的值。当用户将鼠标悬停在标记上时,isHighlighted 会变为 true。当用户点击标记时,isSelected 会变为 true。当地点详情视图关闭时,标记图标会还原为默认样式设置。以下示例展示了如何根据状态更改标记图标样式:

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

将云端地图样式设置与 Local Context Beta 版搭配使用

若要将云端地图样式设置与 Local Context Beta 版搭配使用,请按以下步骤操作:

  1. 使用 mapId 创建 Map 并将其传递给 LocalContextMapView
  2. 停用一般地图注点 (POI) 的标签和图标。
  3. 停用内部 Map 选项中的一些元素。这些步骤是可选的。

使用 mapId 创建 Map 并将其传递给 LocalContextMapView

若要使用云端地图样式设置 ID 添加地图,请定义 map 元素(包括 ID 和所有内部 Map 选项),并使用该元素初始化 LocalContextMapView,如以下示例所示:

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

停用一般 POI 的标签和图标

若要停用一般 POI 的标签和图标,请按以下步骤操作:

  1. 访问 Google Cloud 控制台,然后选择地图样式以打开“地图样式”屏幕。
  2. 地图注点的样式配置中,将标签图标公开范围设置为停用
  3. 地图注点的样式配置中,将公园标签公开范围设置为停用

设置内部 Map 选项(可选)

除了您已设置的任何其他内部 Map 选项之外,您可能还需要设置以下内部 Map 选项,如下所示:

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});