反应谷歌地图没有更新

Question

我正在使用 react-google-map，并在地图中的每个标记处添加折线。但是每次我删除数据时，地图上的标记都不会消失。下面是我的代码。

Googlemap.js

 /*global google*/
import React, { Component } from "react";
import { Polyline } from "react-google-maps";
import {
  withGoogleMap,
  withScriptjs,
  Marker,
  GoogleMap,
  DirectionsRenderer,
} from "react-google-maps";

const Map = ({ places, zoom, center }) => {
  return (
    <GoogleMap defaultZoom={zoom} defaultCenter={center}>
      <Markers places={places} />

      <Polyline
        path={places}
        options={{
          strokeColor: "#FFE900",
          strokeOpacity: 2,
          strokeWeight: 3,
        }}
      />
    </GoogleMap>
  );
};

const Markers = ({ places }) => {
  return places.map((place) => {
    return (
      <Marker key={place.id} position={{ lat: place.lat, lng: place.lng }} />
    );
  });
};


class MapWithMarker extends Component {

  constructor(props) {
    super(props);
    this.state = { places: this.props.places }; //initialize initial state from props
  }

  render() {
    return (
      <div>
        <Map
          center={this.props.center}
          zoom={this.props.zoom}
          places={this.state.places}
          containerElement={<div style={{ height: `100vh`, width: "100% " }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default withScriptjs(withGoogleMap(MapWithMarker));

maploader.js

import React, { Component, useState } from "react";
import "./config";
import Map from "./googlemap";

const App = () => {
  const place = places;

  return (
    <div>
      <Map
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=API_KEY"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100vh` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        center={{ lat: 14.6091, lng: 121.0223 }}
        zoom={12}
        places={places}
      />
    </div>
  );
};

export default App;

Config.js

places = [
  {
    name: "Manila",
    title: "Newcastle",
    lat: 14.6091,
    lng: 121.0223,
    id: 1,
  },
  {
    name: "Taguig",
    title: "Sydney",
    lat: 14.5135352,
    lng: 121.0303829,
    id: 2,
  },
  {
    name: "Makati",
    title: "Melbourne",
    lat: 14.554592,
    lng: 121.0156802,
    id: 3,
  },
];

这是我的 map.js 中按钮的示例代码。这个按钮将删除数组中的最后一个对象。每次我删除数据时，它都应该反映在地图中，该地图不工作但在控制台中工作。

function clickSubmit(e) {
    places.pop();
  }

任何帮助将不胜感激。 :)

Answer 1

在 Google Maps JavaScript API 的 removing a marker 中，您应该调用 setMap() 方法并传递 null 参数。但是，当您使用react-google-maps library 时，他们的documentation 似乎不包含setMap() 方法。

您可以在不使用 sample code 之类的库的情况下实现您的用例。请在Maps.js 文件中使用您的 API 密钥以使代码正常工作。

请参阅代码 sn-p 以及显示此内容的组件的内联 cmets：

import React, { Component } from "react";
import { render } from "react-dom";
import Map from "./Map";
import "./style.css";
import "./config";

class App extends Component {
  render() {
    return (
      <div id="container">
        <input type="button" value="Delete " id="myBtn" />
        <Map
          id="myMap"
          options={{
            center: { lat: 14.6091, lng: 121.0223 },
            zoom: 12,
          }}
          onMapLoad={(map) => {
            let placeArray = [];
            let markersArray = [];
            let polylinePath = [];
            let polyline;
            //putting the places from config.js in an array
            {
              places.map((markerJson) => placeArray.push(markerJson));
            }
            
            //Adding Marker for each coordinate in the array
            for (let i = 0; i < placeArray.length; i++) {
              addMarker({ lat: placeArray[i].lat, lng: placeArray[i].lng });
            }
            //function for creating polyline
            createPolyline();

            document.getElementById("myBtn").addEventListener("click", function () {
                //Removing marker of the last coordinate in the map
                markersArray[placeArray.length - 1].setMap(null);
                //removing last object in the place and marker array
                placeArray.pop();
                markersArray.pop();
                //Removing polyline in the map
                polyline.setMap(null);
                //function for creating new polyline using the path that does not include the deleted coordinate
                createPolyline();
            })

          
            function createPolyline() {
             //clearing polyline Path array
              polylinePath = [];
             //putting the coordinates in the polylinepath array to be used as the path of polyline
              for (let i = 0; i < placeArray.length; i++) {
                polylinePath.push({
                  lat: placeArray[i].lat,
                  lng: placeArray[i].lng,
                });
              }
              
              //creating polyline
              polyline = new google.maps.Polyline({
                path: polylinePath,
                geodesic: true,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2,
              })
              //showing polyline in the map
              polyline.setMap(map);
            }
            // Adds a marker to the map and push to the array.
            function addMarker(location) {
              //creating new marker
              const marker = new google.maps.Marker({
                position: location,
                map: map,
              });
              //putting the created marker in the markers array to be easily deleted in the map
              markersArray.push(marker);
            }
          }}
        />
      </div>
    );
  }
}

export default App;