如何使用react-google-maps包进行缩放并专注于标记位置 [英] How to focus on the marker position with zoom in react using react-google-maps package

问题描述

如何通过变焦聚焦到标记位置.当标记位置更改为其他位置后，我需要手动放大和缩小并转到市场位置.

How to focus with zoom to the marker position. Once the marker position changes to different location I need to manually zoom in and out and go to the market location.

从字面上看，我需要手动滚动并缩放到标记的位置，这很困难.

Literally I need to manually scroll and zoom into the position of the marker which is difficult.

我正在使用 https://github.com/tomchentw/react-google-地图 包

I am using https://github.com/tomchentw/react-google-maps package

下面的代码的示例输出.

Sample output of below code.

输出Gif图片链接

import React from 'react';
import { compose, withStateHandlers } from "recompose";
import { InfoWindow, withGoogleMap, withScriptjs, GoogleMap, Marker } from 'react-google-maps';


const Map = compose(
    withGoogleMap
)
    (props =>
        <GoogleMap
            defaultZoom={8}
            defaultCenter={props.markerPosition}
        >
            <Marker position={props.markerPosition} />

        </GoogleMap>
    )

export default class MapContainer extends React.Component {
    state = {
      list: [
        { lat: 57.340204, lng: 41.069438 },
        { lat: 12.991792, lng: 77.566020 },
        { lat: -29.556185, lng: 22.508060 },
        { lat: 35.010270, lng: -88.409909 },
      ],
      coordinates: { lat: -34.397, lng: 150.644 }
    }

    onBtnClick() {
      const min = 1, max = 4;
      const no = Math.floor(Math.random() * (max - min + 1) ) + min;
      this.setState({
        coordinates: this.state.list[no-1]
      });
    }

    render() {
        return (
            <div style={{ height: '100%' }}>
                <input
                  type="button" value="Change Marker Position"
                  style={{ marginBottom: "20px" }}
                  onClick={(e) => this.onBtnClick()}
                />
                <Map
                    markerPosition={this.state.coordinates}
                    googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvcDy5ZYc2ujCS6TTtI3RYX5QmuoV8Ffw"
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `400px` }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                />
            </div>
        )
    }
}

推荐答案

通过将 defaultZoom 更改为 zoom ，将 defaultCenter 更改为居中

fixed it by changing defaultZoom to zoom and defaultCenter to center

这篇关于如何使用react-google-maps包进行缩放并专注于标记位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！