带有Reaction的传单地图上的自定义按钮-传单版本3 [英] Custom button on the leaflet map with React-leaflet version3

问题描述

我是Reaction打字稿的新传单学习者。我想在地图上创建自定义按钮。点击该按钮后，将出现弹出窗口。我看到了很多例子，但它们都是基于旧版本，我也试图创造自己的，但没有运气。文档也没有提供太多帮助。对于我的应用程序来说，即使是一个功能强大的自定义控件组件也非常有效。在这方面的任何帮助都将不胜感激。以下是我的代码

自定义按钮

import React, { Component } from "react";
import { useMap } from "react-leaflet";
import L, { LeafletMouseEvent, Map } from "leaflet";

class Description extends React.Component<{props: any}> {
  createButtonControl() {
    const MapHelp = L.Control.extend({
      onAdd: (map : Map) => {
        const helpDiv = L.DomUtil.create("button", ""); //how to pass here the button name and
        //other property ?
        
        //a bit clueless how to add a click event listener to this button and then
        // open a popup div on the map

      }
     
    });
    return new MapHelp({ position: "bottomright" });
  }

  componentDidMount() {
    const { map } = this.props as any;
    const control = this.createButtonControl();
    control.addTo(map);
  }

  render() {
    return null;
  }
}

function withMap(Component : any) {
  return function WrappedComponent(props : any) {
    const map = useMap();
    return <Component {...props} map={map} />;
  };
}

export default withMap(Description);

我想这样称呼它

<MapContainer
        center={defaultPosition}
        zoom={6}
        zoomControl={false}
        >
             <Description />
            

             <TileLayer
                attribution="Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."
                url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
            />
            <ZoomControl position={'topright'}/>
        </MapContainer>

推荐答案

您已接近成功。坚持使用类组件，您只需要继续创建按钮实例。您可以使用Description上的道具来确定您的按钮将说什么和做什么：

      <Description
        title={"My Button Title"}
        markerPosition={[20.27, -157]}
        description="This is a custom description!"
      />

在您的描述createButtonControl中，您就快成功了。您只需稍微填一下：

createButtonControl() {
    const MapHelp = L.Control.extend({
      onAdd: (map) => {
        const helpDiv = L.DomUtil.create("button", "");
        this.helpDiv = helpDiv;
        // set the inner content from the props
        helpDiv.innerHTML = this.props.title;

        // add the event listener that will create a marker on the map
        helpDiv.addEventListener("click", () => {
          console.log(map.getCenter());
          const marker = L.marker()
            .setLatLng(this.props.markerPosition)
            .bindPopup(this.props.description)
            .addTo(map);

          marker.openPopup();
        });
 
        // return the button div
        return helpDiv;
      }
    });
    return new MapHelp({ position: "bottomright" });
  }

Working codesandbox

有一百万种方法可以改变这一点，但希望这能让你继续前进。

这篇关于带有Reaction的传单地图上的自定义按钮-传单版本3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！