ЕСЛИ еще заявление в React, чтобы изменить цвет маркеров в Google Maps - PullRequest
Новая
       18

ЕСЛИ еще заявление в React, чтобы изменить цвет маркеров в Google Maps

0 голосов
/ 19 марта 2019

Итак, у меня есть переменная "L", эта переменная может иметь значение между 1,2,3,4. Это мой уровень того, насколько серьезным было совершено преступление. Я хочу изменить цвет моих маркеров. У меня проблемы с пониманием, где моя логика реагирует. Это мой код, который у меня есть сейчас, внутри icon = {} можно изменить цвет. 

render() {
  return (
      <div>
        <div className="floating-panel">
          <button onClick={this.handleToggle}>HeatMap</button>
          <button onClick={this.handleToggle1}>Markers</button>
        </div>
        <div className="map-container">
          <Map
            google={this.props.google}
            zoom={14}
            style={mapStyles}
            scrollwheel={true}
            initialCenter={{
              lat: 32.71573699,
              lng: -117.16108799
            }}
          >
            {this.state.isMarkerVisible
              ? this.props.policeCall.map(({ A, B, M, N, L, O }) => {
                  return (
                    <Marker
                      onClick={this.onMarkerClick}
                      icon={{if (L ==1){
    url: " http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
}
else if (L==2) {
    url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"

} else if (L==3) {

    url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
}else{
    url : "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
}}}
                      name={A}
                      info={B}
                      priority={L}
                      position={{ lat: M, lng: N }}
                      story={O}
                    />
                  );
                })
              : null}
  </Map>
        </div>
      </div>
    );
  }
}

const Mcontainer = GoogleApiWrapper({
  apiKey: "",
  libraries: ["visualization"]
})(MapContainer);

const mapStateToProps = state => ({
  policeCall: state.policeCall.policeCall
});

export default connect(mapStateToProps)(Mcontainer);

Я хочу использовать этот тип логики в моем 


if (L ==1){
    url: " http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
}
else if (L==2) {
    url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"

} else if (L==3) {

    url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
}else{
    url : "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
}

1 Ответ

0 голосов
/ 20 марта 2019

if используется для разветвления на операторах , вы хотите разветвляться на разные выражения , для чего предназначен троичный оператор: 

icon={{
  url: L == 1 ? "http://one" : "http://two",
}}

Однако вы обнаружите, что это довольно повторяющееся значение для других значений, для этого вы можете использовать массив поиска: 

icon={{
 url: ["", "http://one", "http://two", "http://three"][L] || "http://default",
}}
...