反应谷歌地图没有更新

问题描述

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

Googlemap.js

SERVER_NAME

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

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

这是map.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,];

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）