Javascript 谷歌地图没有更新

我使用谷歌地图，我在地图上的每个标记上都添加了多边形线条。但是每次我删除一个数据，地图上的标记就不会消失。下面是我的代码

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));

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

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

任何帮助都将不胜感激。：）

在Google Maps JavaScript API中，您应该调用

setMap（）

方法并传递

null

参数。但是，当您使用which

setMap（）

方法时，似乎每个方法都不包括在内

您可以实现您的用例，而无需使用这样的库。请使用

Maps.js

文件中的API密钥使代码正常工作

请参阅代码段，其中包含显示以下内容的组件的内联注释：

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;

import React，{Component}来自“React”；
从“react dom”导入{render}；
从“/Map”导入地图；
导入“/style.css”；
导入“/config”；
类应用程序扩展组件{
render（）{
返回(
{
让placeArray=[]；
设markersArray=[]；
设polylinePath=[]；
让多段线；
//将config.js中的位置放入数组
{
places.map（（markerJson）=>placeArray.push（markerJson））；
}
//为阵列中的每个坐标添加标记
for（设i=0；i
);
}
}
导出默认应用程序；

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

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;