ReactJS - JavaScript: как увеличить выбранный маркер после нажатия на него - PullRequest
Новая
       11

ReactJS - JavaScript: как увеличить выбранный маркер после нажатия на него

0 голосов
/ 14 февраля 2020

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) Я наткнулся на этот источник, и это было полезно, чтобы понять, как создать маркер, но, к сожалению, я не смог чтобы решить проблему.

2) В моем случае я использую google-map-реагировать вместо google-map. Я знаю, что процедура похожа, но по некоторым причинам я мог что-то упустить.

3) После более глубокого изучения проблемы я наткнулся на этот источник, и он был очень полезен, но все же Я не смог решить проблему.

1 Ответ

1 голос
/ 14 февраля 2020

Я не уверен, но вы можете попытаться получить экземпляр ref карты, например 

<GoogleMapReact ref={this.map}

, а затем использовать его в обработчике 

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