自訂當地特色地圖

在這個範例中,我們會將自訂地圖樣式套用至基本地圖。這張地圖顯示夏威夷威基基,並採用熱帶色彩配置樣式。我們也已將 maxPlaceCount 設為 18,以顯示更多搜尋點。

瞭解程式碼

存取基本地圖

基本地圖可做為 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 不同,因此您可以選擇覆寫預設樣式,也可以選擇將自訂樣式與當地特色資料庫預設樣式合併。詳情請參閱設定地圖樣式

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 屬性來自訂標記

根據預設,這些標記會顯示在當地特色資料庫搜尋點標記下方。為確保當地特色資料庫標記不會遮蔽自訂標記,請將標記的 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,
});

試用範例