javascript - 在谷歌地图上更新半径
问题描述
我试图通过从数据库中获取半径来更改我的谷歌地图。现在我只得到“初始状态”半径,之后很难在地图上整体更新它。这与更新用户的位置也是同样的问题(我认为)。我正在使用 Firebase、React 和 Javascript。
这是我的地图代码:
import React from 'react';
import GoogleMapReact from 'google-map-react';
import Marker from './MapMarker';
import {getUserInfo} from '../firebaseConfig'
class SimpleMap extends React.Component {
state = {
lat: "",
lng: "",
userPos: "",
radius: 1500
};
static defaultProps = {
center: {
lat: 59.8,
lng: 17.63889
},
zoom: 11,
};
componentDidMount = () => {
navigator.geolocation.getCurrentPosition(this.currentCoords)
};
currentCoords = (position) => {
const latitude = position.coords.latitude
const longitude = position.coords.longitude
this.setState({
userPos: {lat: latitude, lng: longitude},
})
};
getRadius = () => {
getUserInfo().then((result) => {
this.setState({
radius: result.radius
})
});
}
render() {
const setCenter = this.state.userPos;
const setUserPos = this.state.userPos;
const setUserRadius = this.state.radius;
const apiIsLoaded = (map, maps, setUserPos, setUserRadius) => {
new maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.3,
map,
center: setUserPos,
radius: setUserRadius
});
};
return (
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: //key }}
defaultCenter={this.props.center}
center={setCenter}
defaultZoom={this.props.zoom}
yesIWantToUseGoogleMapApiInternals={true}
onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, setUserPos, setUserRadius)}
>
<Marker
lat={setUserPos.lat}
lng={setUserPos.lng}
color="blue"
/>
</GoogleMapReact>
</div>
);
}
}
export default SimpleMap;
解决方案
你在哪里调用 getRadius 函数?您可以检查您的半径状态是否正在更新?如果您仅获取半径的初始值,则它可能没有被更新。此外,在内部创建新圆apiIsLoaded
并将其半径值设置为半径状态不会改变圆半径,这是因为它只会使用您的状态半径的初始值创建一个圆。为了能够改变你的圆的参数,比如它的半径,你需要把它放在一个变量中,并在每次状态改变时改变这个变量。
这是我所做的:首先,创建一个全局变量:let circle;
然后在您的 apiIsLoaded 中将 circle 对象作为您的 circle 变量的值:
circle = new maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.3,
map,
center: setUserPos,
radius: setUserRadius
});
然后在你改变圆圈状态的函数中,你需要把circle.setRadius(this.state.radius)
. 这将改变你的圆的半径值。所以在你的代码中,我可以看到这是改变状态的函数。请看我如何为下面的圆设置半径:
getRadius = () => {
getUserInfo().then((result) => {
this.setState({
radius: result.radius
})
});
circle.setRadius(this.state.radius)
}
这是我的示例代码,它下面的代码片段与您的有点不同,因为我只是输入了半径的值并单击按钮来更改其值。
import React, { Component } from "react";
import GoogleMapReact from "google-map-react";
import "./style.css";
let circle;
class GoogleMaps extends Component {
constructor(props) {
super(props);
this.state = {
center: { lat: 40.756795, lng: -73.954298 },
inputRad: 100
};
}
onChange = e => {
this.setState({
inputRad: e.target.value
});
};
changeRadius = () => {
console.log(Number(this.state.inputRad));
circle.setRadius(Number(this.state.inputRad));
};
render() {
console.log(this.state.inputRad)
const apiIsLoaded = (map, maps) => {
circle = new maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.3,
map,
center: this.state.center,
radius: this.state.inputRad
});
};
return (
<div>
<div style={{ height: "400px", width: "100%" }}>
<input
placeholder="Enter radius"
type="number"
min="100"
name="inputRad"
onChange={this.onChange}
/>
<input
value="Change circle radius"
type="submit"
onClick={this.changeRadius}
/>
<GoogleMapReact
bootstrapURLKeys={{
key: "YOUR_API_KEY"
}}
defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
defaultZoom={15}
center={this.state.center}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)}
/>
</div>
</div>
);
}
}
export default GoogleMaps;
推荐阅读
- jquery - 如何使用带有动态变量 ID 的 .append()?
- rest - 如何使用过滤器选项查询 api
- c# - xamarin.forms 在 xaml 中设置厚度
- c - 在创建将同时为 200 多个客户端发送/接收任务的服务器时,使用选择或多线程(或两者)更好吗
- sphinx - 将开始/结束修饰符搜索与 wordforms 问题结合使用
- javascript - 如何将时间转换为正确的格式?
- amazon-web-services - 是否可以多次从 AWS SQS 加载相同的消息
- javascript - 使用 React 获取 rails 关联的对象
- python - 如何避免在 Airflow 中运行以前成功的任务?
- php - Laravel Eloquent Eager Loading with belongsToMany 太慢了