点击按钮打开谷歌地图 |反应答案

【问题标题】：Opening Google Map onClicking the Button | Reactjs点击按钮打开谷歌地图 |反应
【发布时间】：2019-06-26 07:42:50
【问题描述】：

我有一个地图组件，我使用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);

【问题讨论】：

标签： javascript reactjs google-maps google-maps-react

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

Google 地图可以使用 GET 参数获取坐标以打开 on_load。为这个地址添加一个href

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

注意

为了能够使用上述答案中提供的格式，您必须使用 `` 引号而不是普通的 " " 或 ' '

【讨论】：

嗨@AlbinWarme，我照你说的做了。但是，它只会将其带到位置区域，但不会在确切位置上显示标记
试试这个https://www.google.com/maps/place/${parseInt(lat)}°07'24.0%22N+${parseInt(lng)}°07'23.4%22E/@${lat},${lng}/
感谢您的帮助。我得到了我所期望的链接 - maps.google.com?q={lat},{lng}