reactjs React瓣叶标测图上的自动打开标记弹出窗口

flmtquvp 于 2023-03-22 发布在 React

关注(0)|答案(2)|浏览(93)

我在React瓣叶图上使用一些标记来显示各种文本。
但我找不到自动打开工具提示的标志。
我得到（position，children，onOpen，onClose）作为可用属性。

render() {
    return (
        <div className={'ShapeLayer'}>
            {
                this.shapes.map(shape => {
                    return (
                        <Marker key={shape['id']} position={shape['coordinates']} draggable={false} opacity={1}>
                            <Popup>
                                <span>{shape['text']}</span>
                            </Popup>
                        </Marker>
                    );

                })
            }
        </div>
    )
}

这是用本机传单上的代码完成的

var marker = L.marker(shapess[i]['coordinates'], {
        opacity: 0.01
    }).bindTooltip(shapess[i]['text'],
        {
            permanent: true,
            className: "shapesText" + i,
            offset: [0, 0],
            direction: "center"
        }
    ).openTooltip().addTo(mymap);

我如何在react_leflet上做同样的事情

reactjs

来源：https://stackoverflow.com/questions/48171437/auto-open-markers-popup-on-react-leaflet-map

2条答案

按热度按时间

xxhby3vn1#

如果只是文本，您可以使用工具提示而不是弹出窗口，然后在工具提示上使用permanent属性。

<Marker key={shape['id']} position={shape['coordinates']} draggable={false} opacity={1}>
    <Tooltip permanent>
          <span>{shape['text']}</span>
    </Tooltip>
</Marker>

以下是更多示例的来源：
react-leaflet/example/components/tooltip.js

赞(0）回复(0）举报 2023-03-22

a14dhokn2#

更新：2023，使用setTimeout访问标记中的openPopup（）。

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { useRef } from 'react';

const Location = () => {
  const position = [6.632264, 124.597816];
  const laptopMarker = L.icon({
    iconUrl: './icons/laptop.gif',
    iconSize: [40, 40],
    popupAnchor: [0, -20],
  })

  const marker = useRef(null);
  return (
    <MapContainer whenReady={() => {
      setTimeout(() => {
        marker.current.openPopup();
      }, 3000);
    }} center={position} zoom={9} scrollWheelZoom={false} >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker ref={marker} position={position} icon={laptopMarker}>
        <Popup maxWidth={250}>
          Hi! <img src='./icons/wave.gif' width='15' height='15' className='inline-block mb-1 mr-1' /> are you interested where I live?
          You can find me here!
        </Popup>
      </Marker>
    </MapContainer >
  )
}

export default Location;

赞(0）回复(0）举报 2023-03-22

我来回答

reactjs React瓣叶标测图上的自动打开标记弹出窗口

2条答案

相关问题

热门标签

最新问答