import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
/*global google*/
const MapWithMarker = withGoogleMap((props) => (
<GoogleMap
defaultZoom={12}
defaultCenter={{ lat: 47.376888, lng: 8.541694 }}
options={{
disableDefaultUI: true,
}}
>
<Marker position={{ lat: 47.376888, lng: 8.541694 }} />
</GoogleMap>
));
class addAddressComponent extends Component {
constructor(props) {
super(props);
this.state = {
lat: 0,
lng: 0,
};
this.onSuggestSelect = this.onSuggestSelect.bind(this);
}
onSuggestSelect(suggest) {
console.log(suggest.location);
this.setState(() => {
return {
lat: 10.0,
lng: 20.022,
};
});
}
render() {
return (
<div className="wrapperClass">
<MapWithMarker
containerElement={<div style={{ height: '244px' }} />}
mapElement={<div style={{ height: '100%' }} />}
className="mapCSS"
center={(this.state.lat, this.state.lng)}
style={{
width: '348px',
height: '250px',
}}
/>
</div>
);
}
}
export default addAddressComponent;
您需要将Center
属性传递给MapWithMarker
组件中的GoogleMap
组件。同样,中心参数需要是一个像这样的对象:
{LAT:-34.397,LNG:150.644}
下面的示例允许您使用按钮更改地图的中心:
import logo from './logo.svg';
import './App.css';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
import {useState} from "react";
const MyMapComponent = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={13}
center={props.center}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
>
{props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
</GoogleMap>
))
function App() {
const [position, setPosition] = useState({ lat: -34.397, lng: 150.644 });
return (
<div className="App">
<button onClick={() => setPosition({lat: 30, lng: 10})}>,
Click me
</button>
<MyMapComponent
isMarkerShown
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
center={position}
mapElement={<div style={{ height: `1000px`}} />}
/>
</div>
);
}
export default App;
根据文档中的示例,他们使用PixelOffset将InfoBox居中:
如何在react-google-maps中更改defaultCenter?我需要找到我的地理定位并更改缺省值lat和LNG。 接下来,我需要将数据传输到组件MapWithAMarker:ecenter={myLocation}和Marker position={myLocation}
使用pathTemplate指向my tiles位置,该位置必须具有以下层次结构: 因此,我真正的问题是如何为我的区域获取瓷砖。 我可以通过从google maps瓷砖服务器中保存瓷砖来手动完成,但是我不知道它是否合法,而且它也会花费很多时间和计算(当放大时,我需要计算下一个瓷砖的协调) 所以这将是很好的,如果google map API提供了一种下载一个区域瓷砖的方法(需要缩放), 另一种选择是
问题内容: 眼前的问题专门针对Google Ad Sense,但可以应用于任何脚本标签插入。我不明白如何在组件中添加类似的内容。 这样的事情可能吗? 问题答案: 这样的事情不需要第三方脚本。 Ad-Sense需要使用如下所示的第三方脚本,如果您使用任何类型的模板(例如django模板等),则应在进行响应之前加载该脚本或将其放入模板中。 把它放在模板中: 然后将您的广告意识包括在内,删除评论(假设您
问题内容: 考虑下面的钩子示例 基本上,我们使用this.forceUpdate()方法强制组件在React类组件中立即重新呈现,如以下示例所示 但是我的查询是如何强制上述功能组件立即使用挂钩重新渲染? 问题答案: 可以使用或进行,因为在内部使用: 不打算在正常情况下使用,仅在测试或其他出色情况下使用。可以以更常规的方式解决这种情况。 是使用不当的例子,是异步的性能,而且不应该被强迫只是因为状态更
但我的问题是我如何强制上面的功能组件重新呈现立即与钩子?