更新:添加了 Dandy's 如果我将 this 绑定(bind)到 componentDidMount,我现在可以访问 componentDidMount 中的 this.setState 函数,但是因为 this.setState 在 componentDidMount 中,所以 this.setState 不是函数。
我想我必须在 componentDidMount 之外构建 map ,但我不确定此时从哪里开始
原文:
所以我正在用 React 构建一个 Google map ,我想在标记点击时打开一个模式。
我的渲染中有模态框
marker.addListener('click', function() {
infowindow.open(map, marker);
this.setState({ showModal: true });
});
在 componentDidMount 中,但我发现我无法更改 componentDidMount 中的状态...关于如何让我的模式在标记点击时显示的任何建议?
import React from 'react';
import {Link} from 'react-router';
import {
Row,
Col,
FormGroup,
ControlLabel,
FormControl,
Button,
Grid,
Modal,
Popover,
Tooltip,
OverlayTrigger
} from 'react-bootstrap';
export class Maps extends React.Component {
constructor(props) {
super(props);
userPosition: {lat: 40.7128, lng: -74.0059},
defaultCenter: {
lat: 40.7128,
lng: -74.0059
},
showModal: false,
};
this.close = this.close.bind(this);
this.open = this.open.bind(this);
this.componentDidMount = this.componentDidMount.bind(this);
}
close() {
this.setState({ showModal: false });
}
open() {
this.setState({ showModal: true });
}
componentDidMount() {
// this.getCurrentPosition();
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">New York</h1>'+
'<div id="bodyContent">'+
'<p>content string</p>'+
'</div>'+
'</div>';
let sourland = {lat: 40.473927, lng: -74.694482};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 40.7128,
lng: -74.0059
}
});
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
var marker = new google.maps.Marker({
position: sourland,
map: map,
title: 'Uluru (Ayers Rock)'
});
// modal code
marker.addListener('click', function() {
infowindow.open(map, marker);
this.setState({ showModal: true });
});
}
render(){
console.log(this.state);
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = (
<Tooltip id="modal-tooltip">
wow.
</Tooltip>
);
return (
<div>
<div id="map" className="map-container"></div>
<Button
bsStyle="primary"
bsSize="large"
onClick={this.open}
>
Launch demo modal
</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>Sourland Mountain Preserve Climbs</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Sourland Mountain Preserve</h4>
<p>Climbing is allowed in blank, but watch out for blank.</p>
<h4>This is a Popover</h4>
<p>there is a <OverlayTrigger overlay={popover}><a href="#">popover</a></OverlayTrigger> here</p>
<h4>Tooltips in a modal</h4>
<p>there is a <OverlayTrigger overlay={tooltip}><a href="#">tooltip</a></OverlayTrigger> here</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
最佳答案
在实现 Dandy 的构造函数修复后,我使用 Daniel Andrews's ES6 React GMap Component 在 ES6 中重写了 map 组件。发布作为引用。
因为这个组件是在 Meteor 1.4 应用程序中使用的,所以我不得不使用严格的 ES6(没有像 Andrews 示例中那样的 ES5 或 ES7+)
export class Maps extends React.Component {
constructor(props) {
super(props);
this.state = {
userPosition: {lat: 40.7128, lng: -74.0059},
defaultCenter: {
lat: 40.7128,
lng: -74.0059
},
zoom: 10,
showModal: false,
};
this.close = this.close.bind(this);
this.open = this.open.bind(this);
}
componentDidMount() {
this.map = this.createMap()
this.marker = this.createMarker()
this.infoWindow = this.createInfoWindow()
google.maps.event.addListener(this.map, 'zoom_changed', ()=> this.handleZoomChange())
google.maps.event.addListener(this.marker, 'click', ()=> this.handleMarkerClick())
}
componentDidUnMount() {
google.maps.event.clearListeners(map, 'zoom_changed')
}
createMap() {
let mapOptions = {
zoom: this.state.zoom,
center: this.mapCenter()
}
return new google.maps.Map(this.refs.mapCanvas, mapOptions)
}
mapCenter() {
return new google.maps.LatLng(
this.state.defaultCenter.lat,
this.state.defaultCenter.lng
)
}
createMarker() {
return new google.maps.Marker({
position: this.mapCenter(),
map: this.map
})
}
createInfoWindow() {
let contentString = "<div class='InfoWindow'>I'm a Window that contains Info Yay</div>"
return new google.maps.InfoWindow({
map: this.map,
anchor: this.marker,
content: contentString
})
}
handleMarkerClick(){
console.log("ow");
this.setState({
showModal: true
});
this.infowindow.open(map, marker);
}
handleZoomChange() {
this.setState({
zoom: this.map.getZoom()
})
}
close() {
this.setState({ showModal: false });
}
open() {
this.setState({ showModal: true });
}
render() {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = (
<Tooltip id="modal-tooltip">
wow.
</Tooltip>
);
return <div>
<div className="GMap">
<div className='UpdatedText'>
<p>Current Zoom: { this.state.zoom }</p>
</div>
<div className='GMap-canvas' ref="mapCanvas">
</div>
</div>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>Sourland Mountain Preserve Climbs</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Sourland Mountain Preserve</h4>
<p>Climbing is allowed in blank, but watch out for blank.</p>
<h4>This is a Popover</h4>
<p>there is a <OverlayTrigger overlay={popover}><a href="#">popover</a></OverlayTrigger> here</p>
<h4>Tooltips in a modal</h4>
<p>there is a <OverlayTrigger overlay={tooltip}><a href="#">tooltip</a></OverlayTrigger> here</p>
<hr />
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
}
关于javascript - ( react )在谷歌地图上打开模式标记点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40077224/