Google-Map-React - Javascript：如何點擊自定義標記

Question

我有一個帶有自定義標記的google-map 。 這些標記是公司的標志。 在查詢 API 后，我可以獲得一個包含我感興趣的容器的 json 文件，並將這些容器注入到表格中。 這些船只有緯度和經度，因此我可以在google-map上將它們定位為自定義標記。

我遇到的問題是我一直試圖點擊這些標記（或徽標），但到目前為止沒有運氣。

在我到目前為止的代碼下面：

谷歌地圖.js

import GoogleMapReact from 'google-map-react';
import { Marker } from "google-maps-react";
import InfoWindow from '../components/InfoWindowBox';

import ShipTracker from '../components/ShipTracker';
import SideBar from '../components/SideBar';
import { Ship } from '../components/ShipTracker';
import { MarkerClickHandle } from '../components/ShipTracker';

onMarkerClick = (props, marker, e) => {
    this.setState({
      selectedPlace: props.place_,
      activeMarker: marker,
      showingInfoWindow: true
    });
  };

  showDetails = place => {
    console.log(place);
  };

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'My_KEY' }}
                    center={{
                        lat: 42.4,
                        lng: -71.1
                    }}
                    zoom={8}
                >
// Rendering all the logos 
                    {this.state.ships.map((ship) => {
                        return (
                            <Ship 
                                ship={ship} 
                                key={ship.CALLSIGN} 
                                lat={ship.LATITUDE} 
                                lng={ship.LONGITUDE} 
                            />
                        )
                    }
// technically this should return the clicked ship (not working)
                    {this.state.markers.map((marker, index) => {
                        return (
                        <MarkerClickHandle
                        ship={ship}
                        key={ship.CALLSIGN} 
                        lat={ship.LATITUDE} 
                        lng={ship.LONGITUDE}
                        zoom = {14}
                        key={index}
                        title={marker.title}
                        name={marker.name}
                        position={marker.position}
                        InfoWindow
                        />
                    })}
                    );
// technically this should return the info window with the clicked info about the vessel (not working)
                    <InfoWindow
                        marker={this.state.activeMarker}
                        visible={this.state.showingInfoWindow}
                    >
                    <div>
                        <h3>{this.state.selectedPlace.name}</h3>
                        <button
                            type="button"
                            onClick={this.showDetails.bind(this, this.state.selectedPlace)}
                        >Show details
                        </button>
                    </div>
                    </InfoWindow>

ShipTracker.js

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

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


const MarkerClickHandle  = ({ marker }) => {
      this.state = {
        markers: [
          {
            title: "Vessel name is: ",
            name: "",
            position: { lat, lng }
          }
        ]
      };
      this.onClick = this.onClick.bind(this);

    onClick(t, map, coord) {
      const { latLng } = coord;
      const lat = latLng.lat();
      const lng = latLng.lng();

      this.setState(previousState => {
        return {
          markers: [
            ...previousState.markers,
            {
              title: "",
              name: "",
              position: { lat, lng }
            }
          ]
        };
      });
    }
}

export { MarkerClickHandle };


const ShipTracker = ({ ships }) => {
    const handleRowClick = (rowValue) => {
        console.log(rowValue);
    };
    return (
        <div className="ship-tracker">
            <Table className="flags-table" responsive hover>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Callsign</th>
                        <th>Heading</th>
                        <th>SOG</th>
                        <th>IMO</th>
                        <th>MMSI</th>
                        <th>Longitude</th>
                        <th>Latitudee</th>
                    </tr>
                </thead>
                <tbody>
                    {ships.map((ship, index) => {
                        const { IMO, NAME, CALLSIGN, HEADING, SOG, MMSI, LONGITUDE, LATITUDE } = ship;
                        const cells = [ NAME, CALLSIGN, HEADING, SOG, IMO, MMSI, LONGITUDE, LATITUDE ];
                        return (
                            <tr onClick={() => handleRowClick(ship)} key={index}>
                                <th scope="row">{index}</th>
                                {cells.map((cell) => <td>{cell}</td>)}
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        </div>
    );
};

到目前為止我嘗試過的：

1）我遇到了這個來源，這對理解如何創建標記很有用，但不幸的是我無法解決問題。

2）我嘗試的另一件事是應用我在這篇文章中找到的程序。 盡管程序很明確，但在我的情況下，我使用google-map-react而不是google-map 。 我知道程序是相似的，但由於某些原因，我可能會遺漏一些東西。

3) 在深入研究問題后，我遇到了這個來源，它非常有用，因為我以相同的方式設置了<Map> ，但是當設置標記時，我無法解決問題並單擊它。

盡管我發現了一些有用的帖子，但我無法解決這個問題。 如果有人已經使用google-map-react來解決這個問題，請指出正確的方向。

Answer 1

要使自定義標記可點擊，可以像這樣擴展Ship組件：

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>
    );
};

這是一個示例，它演示了如何使google-map-react庫的標記可點擊：

import React, { Component } from "react";
import GoogleMapReact from "google-map-react";
import icon from "./orange-blank.png";

const googleAPIKey = "";

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 MapExample({ center, zoom, data }) {

  function handleMarkerClick(){
    console.log('Click')
  }


  return (
    <GoogleMapReact
      style={{ height: "100vh", width: "100%" }}
      defaultZoom={zoom}
      defaultCenter={center}
    >
      {data.map((item, idx) => {
        return <CustomMarker  onMarkerClick={handleMarkerClick} key={idx} lat={item.lat} lng={item.lng} />
      })}
    </GoogleMapReact>
  );
}

Answer 2

試試這個代碼：

import { Map, GoogleApiWrapper, Marker } from "google-maps-react";

handleMarkerClick = (props, marker, e) => {
    // do whatever you want
};

<Marker
    onClick={this.handleMarkerClick}
></Marker>

根據您的需要進行其余配置。