javascript - Google-Map-React - Javascript:如何点击自定义标记
问题描述
我有一个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
解决此问题,请指出正确的方向。
解决方案
要使自定义标记可点击,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>
);
}
推荐阅读
- terraform - 通过 Terraform 在 KVM 上自动部署机器(带有 qcow2 映像)
- php - PHP 数组 (yaml) - 添加或删除配置文件的部分
- mysql - 选择相关的mysql列而不是行
- ruby - Ruby 无效参数@rb_sysopen
- arrays - 如何在C中将2个一维数组从函数返回到main
- angular - Angular 9:更改参数时如何防止重新加载页面
- python - 指定在 Python 中录制音频的最小触发频率
- android - 在 FireStore 集合 Android Kotlin 中查看为空
- javascript - 如何忽略 nuxt 中的 .ts/.js 文件不会在路由中生成?
- css - 在 .Net 5 MVC 应用程序中获取 CSS 隔离