如何解决对地址进行地理编码并将其设置为 Google 地图的初始中心
所以我使用 google maps API 在我的 react 网页上显示地图,我知道如何通过输入 long 和 lat 来设置初始中心点和标记,但是,现在我正在尝试使用地理编码 API,并将该地理编码推送到地图 api 以将其作为初始中心点加载。任何有关如何做到这一点的指导表示赞赏。谢谢你。以下是迄今为止我为 google maps api 编写的代码:
import React,{ Component } from "react";
import { Map,GoogleApiWrapper,InfoWindow,Marker } from "google-maps-react";
const mapStyles = {
width: "100%",height: "30%",};
export class MapContainer extends Component {
state = {
showingInfoWindow: false,// Hides or shows the InfoWindow
activeMarker: {},// Shows the active marker upon click
selectedplace: {},// Shows the InfoWindow to the selected place upon a marker
};
onMarkerClick = (props,marker,e) =>
this.setState({
selectedplace: props,activeMarker: marker,showingInfoWindow: true,});
onClose = (props) => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,activeMarker: null,});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{
lat: -1.2884,lng: 36.8233,}}
>
<Marker
onClick={this.onMarkerClick}
name={"vendor XYZ's Location"}
/>
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedplace.name}</h4>
</div>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: "apiKEY GOES HERE",})(MapContainer);
解决方法
由于您使用的是 google-maps-library,因此当您打算将地图中心更改为地理编码结果时,您可以使用 center
而不是 initialCenter
。然后,您可以使用状态变量来操纵更改。对于地理编码服务,您可以在 componentDidMount
函数中调用它。
以下是实现此目的的 sample code 和代码片段:
/*global google*/
import React,{ Component } from 'react';
import { Map,GoogleApiWrapper,InfoWindow,Marker } from 'google-maps-react';
const mapStyles = {
width: '100%',height: '30%'
};
export class MapContainer extends Component {
state = {
showingInfoWindow: false,// Hides or shows the InfoWindow
activeMarker: {},// Shows the active marker upon click
selectedPlace: {},markerName: "Vendor XYZ's Location",center: {
lat: -1.2884,lng: 36.8233
}
};
componentDidMount = () => {
//Geocoding services
const geocoder = new google.maps.Geocoder();
const address = 'New York';
geocoder.geocode({ address: address },(results,status) => {
if (status === 'OK') {
this.setState({
center: results[0].geometry.location,markerName: results[0].formatted_address
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
};
onMarkerClick = (props,marker,e) => {
console.log(props);
this.setState({
selectedPlace: props,activeMarker: marker,showingInfoWindow: true
});
};
onClose = props => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,activeMarker: null
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={this.state.center}
center={this.state.center}
>
<Marker
position={this.state.center}
onClick={this.onMarkerClick}
name={this.state.markerName}
/>
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
</div>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: "apiKEY GOES HERE"
})(MapContainer);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。