React项目使用Google Map API时如何调整双指移动地图提示到顶部

方法1：全局CSS样式覆盖（最简便） #

Google Map内置的双指移动提示元素有固定类名gm-style-pbc，直接在全局样式文件中覆盖其定位属性即可：

/* 覆盖谷歌地图双指移动提示的默认定位 */
.gm-style .gm-style-pbc {
  top: 20px !important; /* 距离顶部的间距可自行调整 */
  bottom: unset !important; /* 取消默认的底部定位规则 */
  transform: unset !important; /* 取消默认的居中偏移规则 */
}

注意：必须添加!important标识强制覆盖谷歌地图的内置行内样式，否则自定义样式不会生效。

方法2：React组件内样式隔离实现 #

如果不想污染全局样式，可以在React组件中使用CSS Modules、styled-components等方案实现样式隔离覆盖，以styled-components为例：

import styled from 'styled-components';
import GoogleMapReact from 'google-map-react';

const MapContainer = styled.div`
  height: 100vh;
  width: 100%;

  /* 仅作用于当前组件内的地图提示元素 */
  .gm-style .gm-style-pbc {
    top: 20px !important;
    bottom: unset !important;
    transform: unset !important;
  }
`;

function MyMap() {
  return (
    <MapContainer>
      <GoogleMapReact
        defaultCenter={{ lat: 59.95, lng: 30.33 }}
        defaultZoom={11}
        gestureHandling="cooperative"
      />
    </MapContainer>
  );
}

• 如果修改后样式仍未生效，可以打开浏览器控制台的元素选择器，选中提示元素确认当前版本API对应的实际类名，替换代码中的类名即可。
• 可根据业务需求调整top属性的数值，灵活控制提示距离屏幕顶部的间距。

内容的提问来源于stack exchange，提问作者PratikshaKale