将光标更改为指针google-maps react

Question

我正在使用谷歌-地图-反应。默认情况下，当我将鼠标放到地图上时，它会显示一个手光标。当person在地图上悬停时，我想设置一个普通指针，并且只有在开始拖动时，光标才会再次成为一个手动光标。

我试图在许多方面设置draggableCursos道具，但我没有得到我想要的。

谢谢你提前帮忙。

Answer 1

在npm中发布的google-maps-react包的当前版本(google-maps-react)似乎不支持通过Map指定一些属性，包括MapOptions.draggableCursor和MapOptions.draggingCursor。在这种情况下，可以通过本机map对象指定这些属性。下面的示例演示了

class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.handleMapReady = this.handleMapReady.bind(this);
  }

  handleMapReady(mapProps,map) {
    map.setOptions({
      draggableCursor: "default",
      draggingCursor: "pointer"
    });
  }



  render() {
    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={this.props.zoom}
          initialCenter={this.props.center}
          onReady={this.handleMapReady}
        />
      </div>
    );
  }
}

这是一个演示

Answer 2

您可以向映射中添加自定义className，并附加将更改映射上的pointer-events CSS属性的事件。