react-google-maps 可以使用图像地图类型吗？答案

【问题标题】：Can react-google-maps use Image Map Types?react-google-maps 可以使用图像地图类型吗？
【发布时间】：2018-11-05 22:38:35
【问题描述】：

我正在尝试重现以下示例中的示例： https://developers.google.com/maps/documentation/javascript/examples/maptype-image

使用 react-google-maps。它似乎没有相同的类 google.maps.ImageMapType。您是否知道是否有课程可以帮助我，或者如果有人已经这样做了，请给我链接示例？

  <GoogleMap
className="maps"
defaultZoom={17}
defaultCenter={{ lat: 46.215951, lng: 12.306994 }}
defaultMapTypeId="moon"
defaultExtraMapTypes={[{id:"moon", mapType:{
      getTileUrl: function(coord, zoom) {
          return "mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/1/1/0.jpg";
      },
      maxZoom: 9,
      minZoom: 0,
      radius: 1738000,
      name: 'Moon'
    }}]}
defaultOptions={{
 // these following 7 options turn certain controls off see link below
  streetViewControl: false,
  scaleControl: false,
  mapTypeControl: false,
  panControl: false,
  zoomControl: false,
  rotateControl: false,
  fullscreenControl: false
}}

disableDefaultUI>

我尝试做类似的事情

【问题讨论】：

你能分享你试过的代码和错误信息吗？
我链接我的代码。它不会给出任何错误，只是一张空地图

标签： reactjs google-maps react-google-maps

【解决方案1】：

我找到了诀窍。我像示例显示一样创建 const ImageMapType 并将其导出。

在我的地图组件中，我使用以下属性：

defaultOptions={{
              maxZoom: 18,
              mapTypeControlOptions: {
                mapTypeIds: ['moon','satellite']
              }
          }}
          mapTypeId={google ? 'moon' : 'satellite'}
          defaultExtraMapTypes={[
              ['moon', mapStyles ]
          ]}

将其链接到地图。 defaultExtraMapTypes 替换 google api 中的 map.set。

【讨论】：