将光标更改为指针 google-maps-react
change cursor to pointer google-maps-react
我正在使用 google-maps-react。默认情况下,当我将鼠标放在地图上时,它会显示手形光标。我想设置一个鼠标悬停在地图上的普通指针,只有当开始拖动时,光标才会再次变成手形光标。
我试图通过多种方式设置 draggableCursos
道具,但我没有得到我想要的。
提前感谢您的帮助。
您可以向地图添加自定义类名并附加一个事件,该事件将更改地图上的 pointer-events
CSS 属性。
在 npm 中发布的 google-maps-react
软件包的当前版本 (2.0.2
) 似乎不支持通过 Map 组件指定一些属性,包括 MapOptions.draggableCursor
and 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>
);
}
}
我正在使用 google-maps-react。默认情况下,当我将鼠标放在地图上时,它会显示手形光标。我想设置一个鼠标悬停在地图上的普通指针,只有当开始拖动时,光标才会再次变成手形光标。
我试图通过多种方式设置 draggableCursos
道具,但我没有得到我想要的。
提前感谢您的帮助。
您可以向地图添加自定义类名并附加一个事件,该事件将更改地图上的 pointer-events
CSS 属性。
在 npm 中发布的 google-maps-react
软件包的当前版本 (2.0.2
) 似乎不支持通过 Map 组件指定一些属性,包括 MapOptions.draggableCursor
and 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>
);
}
}