0

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

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

谷歌地图.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）我遇到了这个来源，这对于了解如何创建标记很有用，但不幸的是我无法解决问题。

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

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

4

1 回答 1

1

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

<GoogleMapReact ref={this.map}

然后在处理程序中使用它

function handleMarkerClick(marker) {
    this.map.panTo(marker.coordinates);
}
于 2020-02-14T15:32:31.267 回答