单击按钮打开Goog​​le Map | React.js

Question

我有一个地图组件，因为我使用了Google-map-react库来显示google map中的位置。在该地图内，我有一个名为“在地图中查看”的按钮。因此，现在，如果用户单击该按钮。它应该带给他们给定位置坐标的谷歌地图。请在下面找到代码，让我知道，我该如何实现

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from '../../../../../../assets/css/Me.style.js';
import GoogleMapReact from 'google-map-react';
import { Typography, Button } from '@material-ui/core';
import Marker from '@material-ui/icons/LocationOnOutlined'

class DetailsMap extends Component {
    static defaultProps = {
        center: { lat: 40.7446790, lng: -73.9485420 },
      };


  render() {
    const {classes} = this.props;
    return (
      <div className={classes.root}>

            <div className={classes.googleMap}>
                  <GoogleMapReact
                      zoom = {11}
                      onClick={this.onClick}
                      defaultCenter={ this.props.center }
                      >
                    <Marker
                      style={{color: '#ff7777'}}
                      lat={40.7473310}
                      lng={-73.8517440}
                    />
                    <div className={classes.address}>
                      <div className={classes.addressWrapper}>
                    <Typography className={classes.addressHead}>
                        Address
                    </Typography>
                    <Typography className={classes.addressContent}>
                        221, raj start, doler street<br />
                        QC J9PB6X
                    </Typography>
                    <Button variant='outlined' className={classes.view}>
                        View in Maps
                    </Button>
                    </div>
                </div>
                  </GoogleMapReact>
                </div>
      </div>
    )
  }
}

export default withStyles(styles, {withTheme:true})(DetailsMap);

Answer 1

Google地图可以使用GET参数获取坐标以打开on_load。对此地址进行href

https://www.google.com/maps/@${your_lat},${your_lng},${your_desired_zoom}z

Answer 2

我使用此代码在带有标签的特定位置的新标签页中显示Google地图。

 const showInMapClicked = () => {
    window.open("https://maps.google.com?q="+your_lat+","+your_lng );
  };