我正在尝试使用Google Maps API显示一些标记。单击侧边栏中的座席名称时,我也试图平移标记。我不想在每次代理单击时重新创建地图对象和标记对象。 navAgent
函数实际上具有map.panTo(latLng)
,可将地图平移到代理的位置。但是为此,我将必须将地图和标记对象保持全局。我该怎么做?
这是一个沙箱:https://codesandbox.io/s/googlemaps-vdg68
代码:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Row, Col } from "reactstrap";
import "./styles.css";
export default class App extends Component {
constructor(props) {
super(props);
// console.log("Comments lead_id" + this.props.id);
this.state = {
agentList: [
{
status: "green",
name: "X",
lat: "28.5718026",
long: "77.0275846"
},
{
status: "grey",
name: "Y",
lat: "28.5700000",
long: "77.0275846"
}
]
};
this.initMap = this.initMap.bind(this);
this.navAgent = this.navAgent.bind(this);
}
componentDidMount() {
this.initMap();
}
initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: new google.maps.LatLng(28.6139, 77.209),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0; i < this.state.agentList.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(
this.state.agentList[i].lat,
this.state.agentList[i].long
),
map: map,
zoom: 9
});
}
}
navAgent(idx, e) {
e.preventDefault();
// console.log(this.state.agentList[id].lat);
var latLng = new google.maps.LatLng(
this.state.agentList[id].lat,
this.state.agentList[id].long
);
map.panTo(latLng);
}
render() {
return (
<div>
<Col xs="9" sm="9" md="9" lg="9">
<div
id="map"
style={{
width: "100%",
height: "500px",
backgroundColor: "gray",
borderRadius: "5%"
}}
/>
</Col>
<Col xs="3" sm="3" md="3" lg="3">
<span
style={{
margin: "2px",
fontSize: "12px",
textAlign: "center",
marginLeft: "1em"
}}
>
{this.state.agentList.map(function(d, idx) {
{
}
return (
<div>
<button
onClick={e => {
this.navAgent(idx, e);
}}
>
{d.name}
</button>
</div>
);
}, this)}
</span>
</Col>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
答案 0 :(得分:0)
您需要重用map对象,您应该通过声明为该对象使该对象在组件中可访问
this.map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: new google.maps.LatLng(28.6139, 77.209),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
然后,在填充标记时提供相同的地图对象
map: this.map,
之后,在您的导航代理中执行此操作即可
navAgent(idx, e) {
e.preventDefault();
// console.log(this.state.agentList[id].lat);
var latLng = new google.maps.LatLng(
this.state.agentList[id].lat,
this.state.agentList[id].long
);
this.map.panTo(latLng);
}
请注意,我已经使用过this.map。这是使对象可供类组件内部的函数访问的方法。
我还为您修复了codeandbox https://codesandbox.io/s/googlemaps-oeb4v