持有GCP的mapID与Gmap API密钥可否下载Google Maps样式JSON文件？

云上老周

2026-10-14

谷歌地图云端自定义样式导出为本地JSON方案

可以导出，操作方式如下：

导出操作步骤

登录你的GCP控制台，进入「Google Maps Platform」板块，打开「地图样式」管理页面，找到对应绑定了你持有的mapID的自定义样式条目
进入该样式的详情编辑页，在页面顶部或右侧的操作栏中找到导出选项，直接选择导出为JSON，即可获得完整的样式配置文件
如果找不到导出入口，也可以通过调试方式提取：先使用原有mapID+API密钥的方式在测试环境加载出地图，打开浏览器控制台执行console.log(map.get('styles'))，就能打印出完整的样式JSON数组，直接复制保存为本地.json文件即可

Angular项目本地样式接入方法

把导出的JSON文件放到Angular项目的src/assets目录下，在地图组件中通过HttpClient读取文件并传入地图配置即可，参考代码：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-map-page',
  templateUrl: './map-page.component.html'
})
export class MapPageComponent implements OnInit {
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.initMap();
  }

  private initMap(): void {
    const mapElement = document.getElementById('map-container') as HTMLElement;
    // 读取本地样式文件
    this.http.get('/assets/your-map-style.json').subscribe((customStyle: any) => {
      const map = new google.maps.Map(mapElement, {
        center: { lat: 39.9042, lng: 116.4074 },
        zoom: 10,
        // 直接传入本地读取的样式配置
        styles: customStyle
      });
    });
  }
}