如果其他声明在改变Google Maps中的标记颜色中有反应

Question

所以我有一个变量" 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"
}

Answer 1

if用于在语句上分支，您要在不同的 expressions 上分支，这就是三元运营商的目的：

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

但是，您会发现这对更多值是重复的，因为您可以使用查找数组：

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