Это то, что я хочу, чтобы каждый маркер имел ту же позицию, что и широта и долгота У меня проблемы с отправкой данных в мою тепловую карту, похоже, что тепловая карта от Google получает и широту, и долготу иначе, чемпозиции маркеров?любая идея ?когда я создаю массив списка объектов, подобных этому, но я хочу, чтобы мои данные читались так же, как мои маркеры читают их.Он получает M для широты и N для долготы.Если я помещаю его в оболочку, как {this.props.policeCall.map(({ A, M, N }) => {
, я получаю сообщение об ошибке, когда делаю свою карту теплопроводности в position={{lat: M , lng:N}}
const positions = [
{ lat: 32.71248, lng: -117.16769 },
{ lat: 32.702163, lng: -117.151572 },
{ lat: 32.716193, lng: -117.167414 },
{ lat: 32.712494, lng: -117.164703 },
{ lat: 32.709707, lng: -117.169981 },
{ lat: 32.714587, lng: -117.16919 },
{ lat: 32.714715, lng: -117.157309 },
{ lat: 32.71681, lng: -117.157463 },
{ lat: 32.722005, lng: -117.158431 },
{ lat: 32.716848, lng: -117.159111 },
{ lat: 32.745511, lng: -117.207977 },
{ lat: 32.658606, lng: -117.101303 },
{ lat: 32.733247, lng: -117.22652 },
{ lat: 32.72937, lng: -117.233911 },
{ lat: 32.712494, lng: -117.164703 }
];
export class MapContainer extends Component {
state = {
showingInfoWindow: false, //Hides or the shows the infoWindow
activeMarker: {}, //Shows the active marker upon click
selectedPlace: {} //Shows the infoWindow to the selected place upon a marker
};
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
onClose = props => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{
lat: 32.71573699,
lng: -117.16108799
}}
>
{this.props.policeCall.map(({ A, M, N }) => {
return (
<Marker
onClick={this.onMarkerClick}
name={A}
position={{ lat: M, lng: N }}
/>
);
})}
{this.props.policeCall.map(({ A, M, N }) => {
return (
<HeatMap
gradient={gradient}
opacity={3}
position={{lat: M , lng:N}}
radius={30}
/>
);
})}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
</div>
</InfoWindow>
</Map>
);
}
}
Это то, как мои данные выглядят из json, который читает их. M и N - это широта и долгота. Как это можно вставить в данные моей тепловой карты?
module.exports = [
{"A": "P17060024503", "B": "6/14/2017 21:54", "C": "4", "D": "10", "E": "", "F": "14TH", "G": "ST", "H": "10 14TH ST, San Diego, CA", "I": "1151", "J": "O", "K": "521", "L": "2", "M": "32.7054489", "N": "-117.1518696"},
{ "A": "P17030051227", "B": "3/29/2017 22:24", "C": "4", "D": "10", "E": "", "F": "14TH", "G": "ST", "H": "10 14TH ST, San Diego, CA", "I": "1016", "J": "A", "K": "521", "L": "2", "M": "32.7054544", "N": "-117.1467137"},
{ "A": "P17060004814", "B": "6/3/2017 18:04", "C": "7", "D": "10", "E": "", "F": "14TH", "G": "ST", "H": "10 14TH ST, San Diego, CA", "I": "1016", "J": "A", "K": "521", "L": "2", "M": "32.7053961", "N": "-117.1444185"},
{ "A": "P17030029336", "B": "3/17/2017 10:57", "C": "6", "D": "10", "E": "", "F": "14TH", "G": "ST", "H": "10 14TH ST, San Diego, CA", "I": "1151", "J": "OT", "K": "521", "L": "2", "M": "32.7054244", "N": "-117.1425917"},
{ "A": "P17030005412", "B": "3/3/2017 23:45", "C": "6", "D": "10", "E": "", "F": "15TH", "G": "ST", "H": "10 15TH ST, San Diego, CA", "I": "911P", "J": "CAN", "K": "521", "L": "2", "M": "32.7055067", "N": "-117.1405936"},