[英]How to display shared link in google map react
我正在使用react-google-maps
,我能夠根據lan
和lat
顯示位置,但我找不到任何使用共享鏈接顯示位置的方法,例如https://goo.gl/maps/YBuwmbwH21yUE19Z9
我想在谷歌 map 中顯示這個鏈接
這是我的代碼:
withGoogleMap(props => (
<GoogleMap
defaultZoom={17}
defaultCenter={{ lat: props.lat, lng: props.lng }}
>
{props.isMarkerShown && (
<Marker
clickable={true}
title={'asdasdads'}
position={{ lat: props.lat, lng: props.lng }}
/>
)}
</GoogleMap>
)),
);
const Location = ({ URL }) => {
var splitUrl = URL.split('!3d');
var latLong = splitUrl[splitUrl.length - 1].split('!4d');
var longitude;
if (latLong.indexOf('?') !== -1) {
longitude = latLong[1].split('\\?')[0];
} else {
longitude = latLong[1];
}
var latitude = latLong[0];
return (
<div
className={`box-dashboard d-flex justify-content-center align-items-center bg-white mb-4`}
>
<MyMapComponent
lat={parseFloat(latitude)}
lng={parseFloat(longitude)}
isMarkerShown
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${YOUR_GOOGLE_API_KEY}`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `300px`, width: '100%' }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
};
請幫助我,謝謝
請注意, react-google-maps
是為 Google Maps Platform 的產品 Maps JavaScript API 創建的庫。 Google Maps Platform 與 Google Maps App 不同。
如果您想使用代碼中的 latLng 提供將啟動到 Google Maps App 的鏈接,您可以嘗試檢查Maps URL ,您可以在其中創建這樣的鏈接https://www.google.com/maps/search/?api=1&query=YOURLAT,YOURLNG
這是一個 URL,它將在 Google 地圖應用程序中啟動坐標。
這是一個示例代碼和代碼片段,它為您在 map 中的任何點單擊的坐標創建一個 Google 地圖鏈接:
import React, { Component } from "react";
import { withGoogleMap, GoogleMap } from "react-google-maps";
class Map extends Component {
constructor(props) {
super(props);
this.state = {
center: { lat: 24.886, lng: -70.268 },
link: ""
};
}
onMapClick = e => {
console.log(e.latLng.lat());
this.setState({
link:
"https://www.google.com/maps/search/?api=1&query=" +
e.latLng.lat() +
"," +
e.latLng.lng()
});
};
render() {
const GoogleMapExample = withGoogleMap(props => (
<GoogleMap
defaultCenter={this.state.center}
defaultZoom={3}
onClick={this.onMapClick}
/>
));
return (
<div>
<p>Click the map to get link of coordinate</p>
{this.state.link !== "" && (
<a href={this.state.link}>{this.state.link}</a>
)}
<GoogleMapExample
containerElement={<div style={{ height: `500px`, width: "500px" }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}
}
export default Map;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.