有没有办法在谷歌地图的叠加层上方添加标记反应？答案

【问题标题】：Is there any way to add markers above overlay in google maps react?有没有办法在谷歌地图的叠加层上方添加标记反应？
【发布时间】：2022-01-07 23:00:07
【问题描述】：

我正在尝试在地图上方添加叠加层并将标记放置在叠加层上方。但我不能这样做。我该怎么做？我正在使用 google-maps-react 库作为依赖项。

<div>
    <Map
      key={active}
      google={google}
      containerStyle={containerStyle}
      zoom={5}
      disableDefaultUI
      initialCenter={{
        lat: markers[0].position.lat,
        lng: markers[0].position.lng,
      }}
    >
      <div className="absolute top-0 bottom-0 right-0 left-0 bg-gray-400 pointer-events-none" />
      <Marker
        title="The marker`s title will appear as a tooltip."
        name="SOMA"
        position={{ lat: 37.778519, lng: -122.40564 }}
      />
    </Map>
  </div>

the view right now

【问题讨论】：

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

【解决方案1】：

您可以使用 Google Maps JavaScript API 的 GroundOverlay object 来完成此操作。但是您需要获取 google-maps-react 代码中使用的当前地图对象，然后您将使用它来将叠加层设置到此地图参考中。

请参阅下面的sample code 和代码 sn-p：

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%',
};

const imageBounds = {
  north: 40.773941,
  south: 40.712216,
  east: -74.12544,
  west: -74.22655,
};

class MapWithOverlay extends Component {
  mapRef = (ref) => {
    let historicalOverlay = new google.maps.GroundOverlay(
      'https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg',
      imageBounds
    );
    historicalOverlay.setMap(ref.map);
  };

  render() {
    return (
      <>
        <div>
          <Map
            ref={(ref) => {
              this.mapRef(ref);
            }}
            google={this.props.google}
            zoom={12}
            style={mapStyles}
            initialCenter={{ lat: 40.74, lng: -74.18 }}
          >
            <Marker position={{ lat: 40.74, lng: -74.18 }} />
          </Map>
        </div>
      </>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR_KEY',
})(MapWithOverlay);

【讨论】：