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

Question

I just finished to set a small user interface containing:

1) dropdown menus

2) 1 button

3) 1 progress-bar

As shown in the image below:

The problem I have is that when I drag the map, for example, to see what is on the right, all the components listed are moving together with the map. But I want them to be fixed while moving the cursor.

As soon as I release the mouse click, the components go back to the original position.

See the problem below during dragging the map:

Below the snippet of 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>
);

Below the snippet of GoogleMap.css . For this file I am including only one component as the others are structured similarly:

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

What I have done so far:

1) I consulted the following source and it seems that if a components has to be fixed, the best approach would be to use position: sticky however the result was not the one expected as shown below:

2) If I change from position: fixed; to position: absolute; nothing changes.

3) If I change from position: fixed; to position: relative; I get the same result as point 1)

4) The last thing I tried was changing the position of the map on the GoogleMap.js file as fixed as explained below:

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

That also didn't cause any changes.

I am not sure at this point what the error could be in order to keep all the components fixed in their position during paning or dragging on the map.

Answer 1

You could create a custom MapControl class like the following, found ongithub

<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