Javascript 如何过滤结果和更新谷歌地图

我最后一个问题是， 在这一点上，我已经做了所有我需要做的事情，除了一件事，无论我尝试什么，我似乎都无法让搜索显示列表上的项目和地图上的标记。 我曾尝试使用过滤器，但只有当输入字段有内容时，才能缩小列表的范围。我似乎无法更改标记和列表。 这是我到目前为止的代码

import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper 
} from 'google-maps-react';

var  AllPlaces = [
{
"name" : "Pizza",
"lat": "40.7589",
"lng":"-73.9851",
},

{
"name" : "Cookies",
"lat": "40.7690",
"lng":"-73.9952",
},
{
"name" : "Bagels",
"lat": "40.7489",
"lng":"-73.9751",
}
]

class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
query:'',
};

markers = []


onMarkerClick = (props, marker, e) => {
this.setState({
  selectedPlace: props,
  activeMarker: marker,
  showingInfoWindow: true
 });
}

onLiClick = (i) =>{
this.setState({
    showingInfoWindow: true,
    activeMarker: this.markers[i],
    selectedPlace: AllPlaces[i]
})
}


onMapClicked = (props) => {
if (this.state.showingInfoWindow) {
  this.setState({
    showingInfoWindow: false,
    activeMarker: null
  })
}
}


CreateInputField = () => (
<input
  placeholder = "Search Nearby Places"
/>
)

findPlaces = () => (
<ol className='Places'>
  {AllPlaces.map((arrayItem, index)=>
    <li
    key = {index}
    className='Place'
    onClick={() => {this.onLiClick(index)}}
    >{arrayItem.name}</li>
  )}
</ol>
);

render() {
return (
  <div className = 'map-container' style= 
{{marginleft:'250px'}}>
    <div>
      <div className = 'sideMenu'>
        <div className = 'List'>
          <h1 className = 'title'> Places to Eat 
</h1>
            {this.CreateInputField()}
        </div>
        <div className = 'PlaceList'>
          {this.findPlaces()}
        </div>
      </div>
    </div>
    <Map google={this.props.google} zoom={14}
      initialCenter = {{lat:40.7589, lng:-73.9851}}
      onClick={this.onMapClicked}>
      {AllPlaces.map((marker, i) =>
          <Marker
          ref={(e) => {if (e) this.markers[i] = 
 e.marker}}
          onClick={this.onMarkerClick}
          title = {marker.name}
          name={marker.name}
          position = 
{{lat:marker.lat,lng:marker.lng}}
          />
      )}
      <InfoWindow
        onOpen={this.windowHasOpened}
        onClose={this.windowHasClosed}
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}>
        <div>
          <h1>{this.state.selectedPlace.name}</h1>
        </div>
      </InfoWindow>
    </Map>
  </div>
 );
 }
}

export default GoogleApiWrapper({
apiKey: 'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'
})(MapContainer)

import React，{Component}来自'React'；
导入{Map，InfoWindow，Marker，GoogleApiWrapper
}来自“谷歌地图反应”；
变量AllPlaces=[
{
“名称”：“比萨饼”，
“lat”：“40.7589”，
“液化天然气”：“-73.9851”，
},
{
“名称”：“Cookies”，
“lat”：“40.7690”，
“液化天然气”：“-73.9952”，
},
{
“名称”：“百吉饼”，
“lat”：“40.7489”，
“液化天然气”：“-73.9751”，
}
]
类MapContainer扩展组件{
状态={
ShowingInfo窗口：false，
活动标记：{}，
所选地点：{}，
查询：“”，
};
标记=[]
onMarkerClick=（道具、记号笔、e）=>{
这是我的国家({
选择地点：道具，
活动标记器：标记器，
showingInfoWindow：真
});
}
onLiClick=（i）=>{
这是我的国家({
ShowingInfo窗口：正确，
activeMarker:this.markers[i]，
所选地点：所有地点[i]
})
}
onMapClicked=（道具）=>{
if（此.state.showiningInfo窗口）{
这是我的国家({
ShowingInfo窗口：false，
活动标记：空
})
}
}
CreateInputField=（）=>(
)
findPlaces=（）=>(
{AllPlaces.map（（arrayItem，index）=>
{this.onLiClick（index）}
>{arrayItem.name}
)}
);
render（）{
返回(
吃的地方
{this.CreateInputField（）}
{this.findPlaces（）}
{AllPlaces.map（（标记，i）=>
{if（e）this.markers[i]=
e、 标记}
onClick={this.onMarkerClick}
title={marker.name}
name={marker.name}
职位=
{{lat:marker.lat，lng:marker.lng}
/>
)}
{this.state.selectedPlace.name}
);
}
}
导出默认GoogleApprapper({
apiKey:'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'
})（地图容器）

---

我已经被困在这个问题上大约两个星期了，现在只需要一些指导

试试看，我已经在state内部创建了一个数组来存储过滤出的位置。键入时，会筛选并更新位置。：）

import React，{Component}来自'React'；
导入{Map，InfoWindow，Marker，GoogleApiWrapper
}来自“谷歌地图反应”；
变量AllPlaces=[
{
“名称”：“比萨饼”，
“lat”：“40.7589”，
“液化天然气”：“-73.9851”，
},
{
“名称”：“Cookies”，
“lat”：“40.7690”，
“液化天然气”：“-73.9952”，
},
{
“名称”：“百吉饼”，
“lat”：“40.7489”，
“液化天然气”：“-73.9751”，
}
]
类MapContainer扩展组件{
状态={
ShowingInfo窗口：false，
活动标记：{}，
所选地点：{}，
查询：“”，
过滤器位置：[]
};
标记=[]
onMarkerClick=（道具、记号笔、e）=>{
这是我的国家({
选择地点：道具，
活动标记器：标记器，
showingInfoWindow：真
});
}
onLiClick=（i）=>{
这是我的国家({
ShowingInfo窗口：正确，
activeMarker:this.markers[i]，
所选地点：所有地点[i]
})
}
onMapClicked=（道具）=>{
if（此.state.showiningInfo窗口）{
这是我的国家({
ShowingInfo窗口：false，
活动标记：空
})
}
}
CreateInputField=（）=>(
this.setState（{filteredPlaces:AllPlaces.filter（place=>！place.name.startsWith（event.target.value））}）
/>
)
render（）{
返回(
吃的地方
{this.CreateInputField（）}
{AllPlaces.map（（arrayItem，index）=>
！this.state.filteredPlaces.includes（arrayItem）&&
{this.onLiClick（index）}
>{arrayItem.name}
)}
{AllPlaces.map（（标记，i）=>
！this.state.filteredPlaces.includes（标记）&&
{if（e）this.markers[i]=
e、 标记}
onClick={this.onMarkerClick}
title={marker.name}
name={marker.name}
职位=
{{lat:marker.lat，lng:marker.lng}
/>
)}
{this.state.selectedPlace.name}
);
}
}
导出默认GoogleApprapper({
apiKey:'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'
})（地图容器）

也许你应该隐藏你的api密钥？我知道这不是一个答案，只是一个安全措施。你现在救了我的命哈哈，我试过输入代码，但当我输入任何东西时，它会删除所有标记并清除整个列表，这是朝着正确方向迈出的一步，这是我将继续尝试的来源，我真的很感谢你的帮助，如果我能带你出去喝一杯，我会编辑的，它确实显示了，但不能解释大写字母，所以如果我开始输入小写字母，它会去掉所有的标记

import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper 
} from 'google-maps-react';

var  AllPlaces = [
{
"name" : "Pizza",
"lat": "40.7589",
"lng":"-73.9851",
},

{
"name" : "Cookies",
"lat": "40.7690",
"lng":"-73.9952",
},
{
"name" : "Bagels",
"lat": "40.7489",
"lng":"-73.9751",
}
]

class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
query:'',
filteredPlaces: []
};

markers = []


onMarkerClick = (props, marker, e) => {
this.setState({
  selectedPlace: props,
  activeMarker: marker,
  showingInfoWindow: true
 });
}

onLiClick = (i) =>{
this.setState({
    showingInfoWindow: true,
    activeMarker: this.markers[i],
    selectedPlace: AllPlaces[i]
})
}


onMapClicked = (props) => {
if (this.state.showingInfoWindow) {
  this.setState({
    showingInfoWindow: false,
    activeMarker: null
  })
}
}


CreateInputField = () => (
<input
  placeholder = "Search Nearby Places"
  onChange={(event) => this.setState({filteredPlaces: AllPlaces.filter(place => !place.name.startsWith(event.target.value))})}
/>
)

render() {
return (
  <div className = 'map-container' style= 
{{marginleft:'250px'}}>
    <div>
      <div className = 'sideMenu'>
        <div className = 'List'>
          <h1 className = 'title'> Places to Eat 
</h1>
            {this.CreateInputField()}
        </div>
        <div className = 'PlaceList'>
          <ol className='Places'>
            {AllPlaces.map((arrayItem, index)=> 
            !this.state.filteredPlaces.includes(arrayItem) &&
              <li
              key = {index}
              className='Place'
              onClick={() => {this.onLiClick(index)}}
              >{arrayItem.name}</li>
            )}
          </ol>
        </div>
      </div>
    </div>
    <Map google={this.props.google} zoom={14}
      initialCenter = {{lat:40.7589, lng:-73.9851}}
      onClick={this.onMapClicked}>
      {AllPlaces.map((marker, i) => 
        !this.state.filteredPlaces.includes(marker) &&
          <Marker
          ref={(e) => {if (e) this.markers[i] = 
 e.marker}}
          onClick={this.onMarkerClick}
          title = {marker.name}
          name={marker.name}
          position = 
{{lat:marker.lat,lng:marker.lng}}
          />
      )}
      <InfoWindow
        onOpen={this.windowHasOpened}
        onClose={this.windowHasClosed}
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}>
        <div>
          <h1>{this.state.selectedPlace.name}</h1>
        </div>
      </InfoWindow>
    </Map>
  </div>
 );
 }
}

export default GoogleApiWrapper({
apiKey: 'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'
})(MapContainer)