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

【问题标题】：change cursor to pointer google-maps-react将光标更改为指针 google-maps-react
【发布时间】：2019-02-17 20:57:01
【问题描述】：

我正在使用google-maps-react。默认情况下，当我将鼠标放在地图上时，它会显示一个手形光标。当人在地图上悬停时，我想设置一个普通指针，只有当开始拖动时，光标才会再次变成手形光标。

我尝试通过多种方式设置 draggableCursos 属性，但没有得到我想要的。

提前感谢您的帮助。

【问题讨论】：

标签： reactjs react-google-maps

【解决方案1】：

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

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>
    );
  }
}

Here is a demo

【讨论】：

【解决方案2】：

您可以向地图添加自定义类名并附加一个事件，该事件将更改地图上的pointer-events CSS 属性。

【讨论】：