如何在lib“@react-google-maps/api”中使用“基于云的地图样式”

Question

我有一个带有 . 我在 console.cloud 中创建了“地图样式”和 mapId 并将它们链接起来。然后我在代码中添加了mapId，但是样式没有改变。

render() {

return (
  <LoadScript
    mapIds={["xxxxxxxxxxxxx"]}
    // id="6e120bcd575d29f7"
    googleMapsApiKey="xxxxxxxxxxxxxxxxxxx"
  >
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={{
        lat: 50.751642333131244, 
        lng: 25.329876895818945
      }}
      zoom={17}
    >
           <Marker
            onLoad={this.onLoad}
            position={{
                lat: 50.7516779698738, 
                lng: 25.329030658899786
              }}
            />
    </GoogleMap>
  </LoadScript>
)

} }

Answer 1

&map_ids=要实现基于云的地图样式，您需要在地图Javascript脚本标记的参数和地图对象参数中添加mapId mapId。您的代码仅在地图 JavaScript 脚本标记中添加 mapId。要在地图对象参数中添加 mapId，您需要mapId在对象内添加选项以使用@react-google-maps/api库实现此样式。请参阅下面的工作示例代码和代码片段：

import ReactDOM from "react-dom";
import React from "react";

import {
  GoogleMap,
  LoadScript
} from "@react-google-maps/api";
const lib = ["places"];
const id = ["6e120bcd575d29f7"]
const key = ""; // PUT GMAP API KEY HERE
const defaultLocation = { lat: 40.756795, lng: -73.954298 };

class Map extends React.Component {
  render() {
    return (
      <div>
       <LoadScript googleMapsApiKey={key} libraries={lib} mapIds={id} >
        <GoogleMap
          center={defaultLocation}
          zoom={5}
          options={{ mapId: "6e120bcd575d29f7" }}
          mapContainerStyle={{ height: "400px", width: "800px" }}
        />
        </LoadScript>
      </div>
    );
  }
}