1

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

2 回答 2

5

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

 const showInMapClicked = () => {
    window.open("https://maps.google.com?q="+your_lat+","+your_lng );
  };
于 2019-09-29T13:36:16.500 回答
3

谷歌地图可以使用 GET 参数获取坐标来打开 on_load。对这个地址做一个href

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

笔记

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

于 2019-06-26T07:51:23.487 回答