[英]get lat and lang from address to pass it to react leaflet
react leaflet needs lat and lng to show desired place in the map. react传单需要经纬度才能在地图上显示所需的位置。 How can i calculate that lat and lng from given address?
如何从给定地址计算经纬度? I need the lat and lng of two address.
我需要两个地址的经纬度。
Should i have to use geocoder and wrap renderMap function inside it? 我是否必须使用geocoder并在其中包装renderMap函数? In my code i want lat and lng of cityOrigen and cityDestino.
在我的代码中,我想要lat和lng的cityOrigen和cityDestino。
function renderMap(cityOrigen, cityDestino) {
return <ReactMap crityOrigen={cityOrigen} cityDestino={cityDestino} />;
}
const ReactMap = ({ cityOrigen, cityDestino }) => {
const position = [51.505, -0.09];
return (
<Map center={position} zoom={13} style={{ height: 500 }}>
<TileLayer
url='https://mt{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup.</span>
</Popup>
</Marker>
</Map>
);
};
class CarResult extends Component {
render() {
const { carResult, origen, destino } = this.props;
const cityOrigen = origen && origen.label.split(', ')[0];
const cityDestino = destino && destino.label.split(', ')[0];
const carResultMap = renderMap(cityOrigen, cityDestino);
if (!carResult.fetching) {
return (
<div>
Hemos encontrado {carResultList.length} ofertas para ti.
<div className="car-result-container">
<Grid fluid>
<Row>
<Col xs={12} sm={12} md={6}>
{carResultList}
</Col>
<Col x={12} sm={12} md={6}>
{carResultMap}
</Col>
</Row>
</Grid>
</div>
</div>
);
}
}
Couple of things: 几件事情:
in renderMap
you have cityOrigen
and the ReactMap component is being passed in crityOrigen
. 在
renderMap
您具有cityOrigen
,而ReactMap组件正在crityOrigen
中传递。 I'm sure that's just a typo. 我敢肯定那只是一个错字。
You can use a Leaflet Geocoder plugin such as this one . 您可以使用像这样的Leaflet Geocoder插件。 You can put that into your
renderMap
function to parse the location (which I assume is cityDestino
and cityOrigen
, in address). 您可以将其放入
renderMap
函数中以解析位置(我假设地址中的cityDestino
和cityOrigen
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.