Question

我正在尝试使用react设置交互式“地图”，但我看不到如何设置它。

我的交互式地图是我想在其上添加热点的航空影像，该热点可以用另一幅图像显示该地点的预览。

然后，如果我单击预览，我想以真实大小显示图像，但是我不知道如何做...

我使用React

我愿意接受任何建议和建议！

谢谢大家

Answer 1

查看Leaflet https://leafletjs.com/reference-1.6.0.html，它具有npm软件包，将其与react https://react-leaflet.js.org/集成在一起。

传单使您可以显示地图并创建基于HTML的自定义标记组件。这些标记可以侦听用户交互事件，例如onClick和onMouseOver。捕获用户的单击或悬停事件后，您可以在标记顶部呈现所需的任何内容-例如图像，可能带有漂亮的标题，描述或其他可能需要的内容。

在单击图像时，您可能希望在另一视图中显示具有不同CSS样式的图像，以便可以以全宽和全高显示它，或者甚至可以设置指向原始图像URL的链接，更加简单，但同时会暂时将用户赶出您的网站。

import React from 'react'
import { divIcon } from 'leaflet'
import { Marker } from 'react-leaflet'
import { renderToStaticMarkup } from 'react-dom/server'
import PropTypes from 'proptypes'
import 'leaflet/dist/leaflet.css'

const Index = props => {
    const iconMarkup = renderToStaticMarkup(
        <i
            className="dispatcher-marker fa fa-map-marker-alt"
            style={{ color: props.location.color }}
        />
    )

    const customMarkerIcon = divIcon({
        html: iconMarkup
    })

    return (
        <Marker
            position={[ props.location.lat, props.location.lng ]}
            icon={customMarkerIcon}
            opacity={props.opacity}
            onClick={() => props.handleClick(props.location.id, props.route)}
        />
    )
}

Index.propTypes = {
    handleClick: PropTypes.func,
    location: PropTypes.object.isRequired,
    route: PropTypes.object.isRequired,
    opacity: PropTypes.number.isRequired,
}

export default Index

如何通过React使用图片创建自定义的交互式“地图”？

1 个答案: