ReactJS

Question

使用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 而不是 google-map。我知道过程是相似的，但由于某些原因我可能遗漏了一些东西。

3) 在深入研究问题后，我找到了 this 源代码，它非常有用，但我仍然无法解决问题。

Answer 1

我不确定，但您可以尝试获取 map throw ref 的实例喜欢

<GoogleMapReact ref={this.map}

然后在处理程序中使用它

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

ReactJS - JavaScript：如何在点击自定义标记后对其进行缩放

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

javascript

google-map-react