javascript - ReactJS-JavaScript : How to zoom on customized marker after click on it

Question

Usig google-map-react，点击自定义标记后如何放大它？我可以单击标记，但单击后它不会缩放。

下面是最重要部分的代码片段:

GoogleMap.js

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const markerStyle = {
    position: 'absolute'
};

function CustomMarker({ lat, lng, onMarkerClick }) {
    return (
        <div onClick={onMarkerClick} lat={lat} lng={lng}>
            <img style={markerStyle} src={icon} alt="icon" />
        </div>
    );
}
function MapClick({ center, zoom, data }) {
    function handleMarkerClick() {
        console.log('Click');
    }
}


class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true,
            buttonClickedAt: null,
            progress: 0,
            ships: [],
            type: 'All'
        };
    }

// Operations.......

render() {
    return (
        <div className="google-map">
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'My_KEY' }}
                center={{
                    lat: 42.4,
                    lng: -71.1
                }}
                zoom={8}
                defaultZoom={zoom}
                defaultCenter={center}
            >
                {/* Rendering all the markers here */}
                {this.state.ships.map((ship) => (
                    <Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE} />
                ))}

                {/* Trying to focus on the marker after clicking on it */}
                {data.map((item, idx) => {
                return <CustomMarker  onMarkerClick={handleMarkerClick} key={idx} lat={item.lat} lng={item.lng} />
                })}

            </GoogleMapReact>
        </div>
    );
}
}

ShipTracker.js 是我检测正确点击事件的位置:

const Ship = ({ ship }) => {
    const shipName = ship.NAME;
    const company = shipCompanyMap[shipName];

    function handleMarkerClick() {
        console.log('marker clicked');
    }

    const shipImage = companyImageMap[company];
    return (
        <div onClick={handleMarkerClick}>
            {/* Render shipImage image */}
            <img src={shipImage} alt="Logo" />
        </div>
    );
};
export { Ship };

到目前为止我所做的事情:

到目前为止我尝试过的:

1) 我遇到了 this源代码，这对于理解如何创建标记很有用，但不幸的是我无法解决问题。

2) 就我而言，我使用 google-map-react而不是谷歌地图。我知道过程是相似的，但由于某些原因我可能会遗漏一些东西。

3)在深入研究这个问题后，我发现了 this来源，它非常有用，但我仍然无法解决问题。

Answer 1

我不确定，但你可以尝试获取 map 抛出引用的实例就像

<GoogleMapReact ref={this.map}

然后在处理程序中使用它

function handleMarkerClick(marker) {
    this.map.panTo(marker.coordinates);
}