时间戳

首页 > 解决方案 > 如何使用 React 使用图像制作自定义交互式“地图”？

reactjs - 如何使用 React 使用图像制作自定义交互式“地图”？

问题描述

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

我的交互式地图是一个地方的航拍图像，我想在上面添加热点，显示该地点的预览和另一个图像。

之后，如果我单击预览，我想以实际大小显示图像，但我不知道该怎么做...

我使用反应

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

谢谢你们

标签： reactjsimagedictionarytooltip

解决方案

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

Leaflet 允许您显示地图并创建基于 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

推荐阅读