问题描述
我正在使用 google-maps-react 包,我正在尝试为我的地图设置边界。它们应该根据通过 props 传递给组件的值进行更改。它确实成功地做到了这一点,但是在我的网站第一次加载之后,而不是重新加载地图以便我可以看到所有标记,它只是让我处于 lat: 0.0 和 long: 0.0。如果我缩小,我可以看到我的所有标记,但地图不会自行调整大小。 它确实成功加载!只是不加载边界。请参阅下面的图片。
After I save my file and it reloads
After I leave the page and come back,or refresh
这是我尝试过的:
import { Map,Marker,GoogleApiWrapper } from "google-maps-react";
class MapExample extends Component {
constructor(props) {
super(props);
this.state = {
bounds: null
};
this.handleMapLoad = this.handleMapLoad.bind(this);
}
handleMapLoad() {
const bounds = new this.props.google.maps.LatLngBounds();
for (let loc of this.props.originsCoords) bounds.extend({ lat: loc.lat,lng: loc.lng });
this.setState({bounds:bounds});
}
render() {
return (
<Map
onReady={this.handleMapLoad}
google={this.props.google}
bounds={this.state.bounds}
style={{width:'50%',height:'50%'}}
>
{this.props.originsCoords.map((loc,i) => (
<Marker key={i} position={{ lat: loc.lat,lng: loc.lng }} />
))}
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: "api-key"
})(MapExample);
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)