清除路径样式来自谷歌地图的折线而不重新加载地图

Question

我一直在尝试更新谷歌地图上折线的样式（颜色，strokeOpacity，strokeWeight）。我需要能够更新它们而无需重新加载谷歌地图本身，即只有折线。但不幸的是，我无法在过去48小时内找到解决方案。有人可以帮忙吗？

＆＃13;

＆＃13;

//todo: get map.getZoom() and update it in reducer/mapform

import React, { Component } from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

import { connect } from "react-redux";
import { getGuiData } from "../../actions/guiActions";

let map;
class Map extends Component {
  componentDidMount() {
    this.props.getGuiData();
    this.loadMap();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      prevProps.google !== this.props.google ||
      prevProps.form !== this.props.form ||
      prevProps.mapForm.zoom !== this.props.mapForm.zoom
    ) {
      this.loadMap();
    } else if (
      prevProps.guiData !== this.props.guiData ||
      prevProps.mapForm !== this.props.mapForm ||
      prevProps.form !== this.props.form
    ) {
      this.loadPolyline(map);
    }
  }

  loadMap() {
    if (this.props && this.props.google) {
      //checks to make sure that props have been passed
      const { google } = this.props;
      const { zoom } = this.props.mapForm;

      const mapRef = this.refs.map; // looks for HTML div ref 'map'. Returned in render below
      const node = ReactDOM.findDOMNode(mapRef); // finds the 'map' div in the React DOM, names it node

      const mapConfig = Object.assign(
        {},
        {
          center: { lat: 65.048358, lng: 25.538076 }, // sets the center of google map to Oulu Rusko
          zoom: zoom,
          gestureHandling: "cooperative",
          mapTypeId: "terrain"
        }
      );

      map = new google.maps.Map(node, mapConfig); // creates a new Google map on the specified node (ref='map') with the specified configuration set above.
      this.loadPolyline(map);
    }
  }

  loadPolyline(map) {
  //TODO: FIGURE OUT A WAY TO CLEAR ALL POLYLINES BEFORE RELOADING
    let pathStyle;
    let drivePath = [];

    //checks to make sure that props have been passed
    const { google } = this.props;
    // const { maps } = google;
    const { guiData } = this.props.guiData;
    const { good, excellent, heatMapLayer } = this.props.form;
    const { strokeOpacity, strokeWeight } = this.props.mapForm;

    // get coordinates with value to compare
    if (heatMapLayer) {
      drivePath = guiData.map(data => {
        const lat = parseFloat(data.geo.geometry.coordinates[1]);
        const lng = parseFloat(data.geo.geometry.coordinates[0]);

        return {
          location: new google.maps.LatLng(lat, lng),
          value: data[heatMapLayer]
        };
      });
    }

    // draw path for each coordinates based on form inputs values
    for (let i = 0; i < drivePath.length - 1; i++) {
      if (drivePath[i].value < Number(good)) {
        pathStyle = new google.maps.Polyline({
          path: [drivePath[i].location, drivePath[i + 1].location],
          strokeColor: "#BE0006", // alert red
          strokeOpacity,
          strokeWeight
        });
      } else if (
        drivePath[i].value >= Number(good) &&
        drivePath[i].value < Number(excellent)
      ) {
        pathStyle = new google.maps.Polyline({
          path: [drivePath[i].location, drivePath[i + 1].location],
          strokeColor: "#FFCC00", //warning yellow
          strokeOpacity,
          strokeWeight
        });
      } else if (drivePath[i].value >= Number(excellent)) {
        pathStyle = new google.maps.Polyline({
          path: [drivePath[i].location, drivePath[i + 1].location],
          strokeColor: "#3DAA00", //okay green
          strokeOpacity,
          strokeWeight
        });
      }
      console.log("set map");
      pathStyle.setMap(map);
    }
  }

  render() {
    const style = {
      width: "100vw",
      height: "94vh"
    };

    return (
      <div ref="map" style={style}>
        loading map...
      </div>
    );
  }
}

Map.propTypes = {
  google: PropTypes.object.isRequired,
  form: PropTypes.object.isRequired,
  guiData: PropTypes.object.isRequired,
  errors: PropTypes.object,
  getGuiData: PropTypes.func.isRequired,
  mapForm: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  errors: state.errors,
  guiData: state.guiData,
  form: state.form,
  mapForm: state.mapForm
});

export default connect(
  mapStateToProps,
  { getGuiData }
)(Map);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

enter image description here

Answer 1

 this.setState({
      editing: null
 });

这对我有用.....