[英]Google Maps React multiple markers from marker.js components
I want to display multiple markers with Google Maps React just like this , but my file structure is very different than the example. 我想与谷歌地图做出反应,就像显示多个标记这个 ,但我的文件结构比的例子非常不同。 How can I get it to work with my application?
如何使它与我的应用程序一起使用?
/* global Google*/
import React, { Component } from "react";
import { Map, GoogleApiWrapper, InfoWindow, Marker } from "google-maps-react";
const mapStyles = {
width: "45%",
height: "54%"
};
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
});
render() {
const google = window.google;
const data = this.props.data;
const center = this.props.center;
return (
<Map
google={this.props.google}
zoom={13}
style={{}}
scrollwheel={true}
initialCenter={{
lat: 32.71573699,
lng: -117.16108799
}}
>
<Marker
onClick={this.onMarkerClick}
name={""}
position={{ lat: 32.71573699, lng: -117.16108799 }}
/>
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
/>
<Marker
onClick={this.onMarkerClick}
name={"John jones Convention Centre"}
position={{ lat: 32.71673699, lng: -117.16308799 }}
/>
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
/>
<Marker
onClick={this.onMarkerClick}
name={"John jones Convention Centre"}
position={
({ lat: 32.714587, lng: -117.16919 },
{ lat: 32.714715, lng: -117.157309 })
}
/>
<Marker
onClick={this.onMarkerClick}
name={"John jones Convention Centre"}
position={{ lat: 32.716848, lng: -117.159111 }}
/>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: *****
})(MapContainer);
Any recommendations how to organize my code to copy the sandbox example? 有什么建议如何组织我的代码以复制沙箱示例? I'm very lost with that part.
我对那部分非常迷失。 I know how to do it in normal vanilla JavaScript, but not in React.
我知道如何在普通的JavaScript中做到这一点,但在React中却不行。
You can organize your marker data into an array of objects like so: 您可以将标记数据组织成一个对象数组,如下所示:
data: [{onclick: myfunction, name: 'foo', position: coordinates, id: 'something'}]
Then in your render, you can use curly braces to write plain javascript in JSX like so: 然后在渲染中,您可以使用花括号在JSX中编写纯JavaScript,如下所示:
render() {
return (
<Map
google={this.props.google}
zoom={13}
style={{}}
scrollwheel={true}
initialCenter={{
lat: 32.71573699,
lng: -117.16108799
}}
>
{ //curly brace here lets you write javscript in JSX
data.map(item =>
<Marker
key={item.id}
title={item.name}
name={item.name}
position={{ lat: item.lat, lng: item.lng }}
/>
)
} //closing brace
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
/>
</Map>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.