自定义 Local Context Map

在此示例中,我们会将自定义地图样式设置应用于基本地图。以下地图显示的是夏威夷的威基基,采用了充满热带风情的配色方案来设置样式。我们还将 maxPlaceCount 设置为 18,以显示更多地图注点 (POI)。

了解代码

访问基本地图

基本地图可作为 google.maps.localContext.LocalContextMapView 对象的 map 属性进行访问。此地图是一个常规的 google.maps.Map 对象,可使用该类可用的所有参数和方法进行自定义。例如,您可以添加自定义标记和事件监听器。

var marker = new google.maps.Marker({position: center, map:  localContextMapView.map});
localContextMapView.map.addListener('click', () => {
    localContextMapView.hidePlaceDetailsView();
  });

应用自定义样式

由于 google.maps.localContext.LocalContextMapView.map 的默认样式不同于标准 Map,因此您可以选择替换默认值,也可以选择将自定义样式与 Local Context Library 默认样式合并。如需了解详情,请参阅设置地图样式

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

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,
});

添加自定义标记

此示例使用酒店图标来区分中心点与默认的红色图钉标记。详细了解如何通过修改 Markerlabelicon 属性来自定义标记

默认情况下,这些标记将显示在 Local Context Library POI 标记下方。为确保 Local Context Library 标记不会遮盖自定义标记,请将标记的 zIndex 属性设置为大于 maxPlaceCount 的值。

TypeScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

JavaScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

试用示例