单击按钮打开 Google 地图 | Reactjs

Question

我有一个地图组件，其中我使用Google-map-react库来显示谷歌地图中的位置。在该地图内，我有一个名为“在地图中查看”的按钮。所以，现在，如果用户单击该按钮。它应该将他们带到具有给定位置坐标的谷歌地图。请找到下面的代码并告诉我，我怎样才能实现这一目标

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

我使用此代码在新选项卡中显示带有标记的特定位置的谷歌地图。

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