javascript - 如何在谷歌地图上平移时保持下拉菜单和按钮固定

Question

我刚刚完成设置一个小型用户界面，其中包含:

1) 下拉菜单 菜单

2) 1 个按钮

3) 1 进度条

如下图所示:

我遇到的问题是，当我拖动 map 时，例如，查看右侧的内容时，列出的所有组件都会与 map 一起移动。但我希望在移动光标时固定它们。

一旦我释放鼠标单击，组件就会返回到原始位置。

拖动 map 时出现以下问题:

在 GoogleMap.js 代码段下方:

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

const MapContainer = styled.div`
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 200px;
    grid-gap: 10px;
    height: 100vh;
    grid-template-areas: "google-map   sidebar" "ship-tracker sidebar";

    .google-map {
        background: #424242;
        grid-area: google-map;
        position: relative;
        height: 100%;
        width: 100%;
    }
    .map-sidebar {
        background: #9dc183;
        grid-area: sidebar;
    }
    .ship-tracker {
        grid-area: ship-tracker;
    }
`;

const BoatMap = () => (
    <div className="google-map">
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'My_KEY' }}
            center={{
                lat: 42.4,
                lng: -71.1
            }}
            zoom={11}
        >

            <select className="combo-A">
                <option>All</option>
                <option>Marker-A</option>
                <option>Marker-B</option>
            </select>
            <div class="progress-circle p0">
                <span>0%</span>
                <div class="left-half-clipper">
                    <div class="first50-bar" />
                    <div class="value-bar" />
                </div>
            </div>
            <button className="btn-next-request" onClick="">
                Time to Next API Request
            </button>
        </GoogleMapReact>
    </div>
);

位于 GoogleMap.css 代码段下方。对于此文件，我仅包含一个组件，因为其他组件的结构类似:

.combo-A {
    position: fixed;
    height: 34px;
    font-size: 16px;
    border-radius: 3px;
    left: 15px;
    top: 15px;
    margin-right: 500px;
    width: 200px;
    margin: -40vh 50vw auto -50vh;
    background: var(--offWhite);
    padding: 0.1rem 0.9rem;
    border: 3px solid var(--shadowGreen);
    color: var(--primaryGreen);
    font-weight: bold;
}

到目前为止我所做的事情:

1)我查阅了following source似乎如果必须修复某个组件，最好的方法是使用 position: Sticky 但结果并不是预期的结果，如下所示:

2) 如果我从 position:fixed; 更改为 position:absolute; 则不会发生任何变化。

3) 如果我从 position:fixed; 更改为 position:relative;，我会得到与第 1 点相同的结果

4) 我尝试的最后一件事是将 GoogleMap.js 文件上的 map 位置更改为 fixed，如下所述:

.google-map {
    background: #424242;
    grid-area: google-map;
    position: fixed;
    height: 100%;
    width: 100%;
}

这也没有引起任何变化。

目前我不确定可能存在什么错误，以便在 map 上平移或拖动期间将所有组件保持固定在其位置。

Answer 1

您可以创建一个自定义 MapControl 类，如下所示，可在 github 上找到

<MapControl map={this.map || null}
    controlPosition={this.maps ? this.maps.ControlPosition.TOP_LEFT : null}
>
    <YourControlButtonComponentHere />
</MapControl>

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { render } from 'react-dom'

class MapControl extends Component {
  static propTypes = {
    controlPosition: PropTypes.number,
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !this.props.map && nextProps.map
  }

  componentDidMount() {
    this._render()
  }

  componentDidUpdate(prevProps, prevState) {
    this._render()
  }

  componentWillUnmount() {
        const { props } = this
    if (!props.map) return
        const index = props.map.controls[props.controlPosition].getArray().indexOf(this.el)
        props.map.controls[props.controlPosition].removeAt(index)
    }

  _render() {
    const { props } = this
    if (!props.map || !props.controlPosition) return
    render(
      <div ref={el => {
        if (!this.renderedOnce) {
          this.el = el
          props.map.controls[props.controlPosition].push(el)
        } else if (el && this.el && el !== this.el) {
          this.el.innerHTML = '';
          [].slice.call(el.childNodes).forEach(child => this.el.appendChild(child))
        }
        this.renderedOnce = true
      }}>
        {props.children}
      </div>,
      document.createElement('div')
    )
  }

  render() {
    return <noscript/>
  }
}

export default MapControl