Fatal编程技术网
  • javascript/
  • Javascript 在React传单中获取自定义缩放按钮时遇到问题

Javascript 在React传单中获取自定义缩放按钮时遇到问题

javascript reactjs leaflet

Javascript 在React传单中获取自定义缩放按钮时遇到问题,javascript,reactjs,leaflet,react-leaflet,Javascript,Reactjs,Leaflet,React Leaflet,我正在尝试使用react传单构建自己的缩放按钮 我有以下代码： import React from 'react'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import { Map, TileLayer } from 'react-leaflet'; import Control from 'react-leaflet-control'; import FloatingActionButton fr

我正在尝试使用
react传单构建自己的缩放按钮

我有以下代码：

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Map, TileLayer } from 'react-leaflet';
import Control from 'react-leaflet-control';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ZoomIn from 'material-ui/svg-icons/action/zoom-in';
import ZoomOut from 'material-ui/svg-icons/action/zoom-out';


class LeafletMap extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            animate: true,
            center: [
                -34.989610443115,
                -71.232476234436
            ],
            zoom: 13,
            zoomControl: false
        };
    }

    render() {
        return (
            <div>
                <Map
                    animate={this.state.animate} 
                    center={this.state.center} 
                    zoom={this.state.zoom} 
                    zoomControl={this.state.zoomControl}
                    >
                    <TileLayer
                        url={'http://{s}.tile.osm.org/{z}/{x}/{y}.png'}
                        attribution={'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'}
                    />
                    <Control position="topleft">
                        <MuiThemeProvider>
                            <div>
                                <div>&nbsp;</div>
                                <FloatingActionButton mini={true}>
                                    <ZoomIn onClick={ () => alert('Zoom In') } />
                                </FloatingActionButton>
                                <div>&nbsp;</div>
                                <FloatingActionButton mini={true}>
                                    <ZoomOut onClick={ () => alert('Zoom Out') }/>
                                </FloatingActionButton>
                            </div>
                        </MuiThemeProvider>
                    </Control>
                </Map>
            </div>
        );
    }
}
export default LeafletMap;

从“React”导入React；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“反应传单”导入{Map，TileLayer}；
"反应传单管制"的进口管制;；
从“物料ui/FloatingActionButton”导入FloatingActionButton；
从“材质ui/svg图标/操作/放大”导入缩放；
从“材质ui/svg图标/操作/缩小”导入缩放；
类映射扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
动画：对，
中心：[
-34.989610443115,
-71.232476234436
],
缩放：13，
动物控制：错误
};
}
render（）{
返回(
警报（'放大'）}/>
警报（“缩小”）}/>
);
}
}
导出默认地图；
所有这一切都显示得很好，但现在我想把一个函数，我可以做放大或缩小。我不知道如何使用react传单库调用传单的方法。
我尝试了很多方法来实现它，但没有成功

您知道如何实现它吗？

有几种方法可以处理映射函数/操作

  • 通过道具传递
    • 通过
    地图
    的道具（边界、中心、缩放），可以使用许多选项。通过这种方式，您可以在一个州/商店中保持缩放，而不是在传单中

    const React = window.React;
const {
  Map, 
  TileLayer, 
  Marker, 
  Popup
} = window.ReactLeaflet;

class ZoomInState extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
    this.zoomIn = () => this.setState({zoom: this.state.zoom+1})
    this.zoomOut = () => this.setState({zoom: this.state.zoom-1})
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return ( < Map center = {
        position
      }
      zoom = {
        this.state.zoom
      }

      >
      < TileLayer attribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' / >
      < Marker position = {
        position
      } >
        < Popup >
          < span >
            <button onClick={this.zoomOut}>
              Zoom out
            </button >
            < button onClick = {this.zoomIn} >
              Zoom in
            < /button>
          < /span>
        </Popup >
      < /Marker>
      </Map >
    );
  }
}
export default ZoomInState
    三,从上下文获取

    如果您想创建许多需要与地图交互的子组件，这种方法很好。它还保持传单作为唯一的真相来源

    const React = window.React;
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet;

class CustomMarker {

  zoomIn(){
    this.context.map.zoomIn()
  }
  zoomOut(){
    this.context.map.zoomOut()
  }

  render() {
    return (
      <Marker position={position}>
        <Popup>
          <button onCLick={::this.zoomIn}>Zoom In</button>
          <button onCLick={::this.zoomOut}>Zoom In</button>
        </Popup>
      </Marker>
    )
  }
}
export CustomMarker


class MapWithCustomChildren extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <CustomMarker />
      </Map>
    );
  }
}
export default MapWithCustomChildren

    const React=window.React；
const{Map，tillelayer，Marker，Popup}=window.react传单；
类自定义标记{
zoomIn（）{
this.context.map.zoomIn（）
}
zoomOut（）{
this.context.map.zoomOut（）
}
render（）{
返回(
放大
放大
)
}
}
导出自定义标记
类MapWithCustomChildren扩展React.Component{
构造函数（）{
超级（）；
此.state={
拉脱维亚：51.505，
液化天然气：-0.09，
缩放：13，
};
}
render（）{
const position=[this.state.lat，this.state.lng]；
返回(
);
}
}
导出默认映射WithCustomChildren
    有几种处理映射函数/操作的方法

  • 通过道具传递
    • 通过
    地图
    的道具（边界、中心、缩放），可以使用许多选项。通过这种方式，您可以在一个州/商店中保持缩放，而不是在传单中

    const React = window.React;
const {
  Map, 
  TileLayer, 
  Marker, 
  Popup
} = window.ReactLeaflet;

class ZoomInState extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
    this.zoomIn = () => this.setState({zoom: this.state.zoom+1})
    this.zoomOut = () => this.setState({zoom: this.state.zoom-1})
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return ( < Map center = {
        position
      }
      zoom = {
        this.state.zoom
      }

      >
      < TileLayer attribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' / >
      < Marker position = {
        position
      } >
        < Popup >
          < span >
            <button onClick={this.zoomOut}>
              Zoom out
            </button >
            < button onClick = {this.zoomIn} >
              Zoom in
            < /button>
          < /span>
        </Popup >
      < /Marker>
      </Map >
    );
  }
}
export default ZoomInState
    三,从上下文获取

    如果您想创建许多需要与地图交互的子组件，这种方法很好。它还保持传单作为唯一的真相来源

    const React = window.React;
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet;

class CustomMarker {

  zoomIn(){
    this.context.map.zoomIn()
  }
  zoomOut(){
    this.context.map.zoomOut()
  }

  render() {
    return (
      <Marker position={position}>
        <Popup>
          <button onCLick={::this.zoomIn}>Zoom In</button>
          <button onCLick={::this.zoomOut}>Zoom In</button>
        </Popup>
      </Marker>
    )
  }
}
export CustomMarker


class MapWithCustomChildren extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <CustomMarker />
      </Map>
    );
  }
}
export default MapWithCustomChildren

    const React=window.React；
const{Map，tillelayer，Marker，Popup}=window.react传单；
类自定义标记{
zoomIn（）{
this.context.map.zoomIn（）
}
zoomOut（）{
this.context.map.zoomOut（）
}
render（）{
返回(
放大
放大
)
}
}
导出自定义标记
类MapWithCustomChildren扩展React.Component{
构造函数（）{
超级（）；
此.state={
拉脱维亚：51.505，
液化天然气：-0.09，
缩放：13，
};
}
render（）{
const position=[this.state.lat，this.state.lng]；
返回(
);
}
}
导出默认映射WithCustomChildren
    我不确定发生了什么，但是，当我尝试使用该方法时（通过材质ui）。它不起作用。然而，当我使用onClick by react传单控件时，它工作得非常好。现在，我打算在那里添加一个缩放方法，但我不知道如何调用传单的方法来进行放大或缩小。明白了，有几种方法可以解决这个问题。我将用这些例子更新我的答案，但他需要一些时间才能做出这些例子。现在，您可以使用道具设置地图缩放，并使用参考获取地图原始对象。它是否会跟踪滚动缩放，因为滚动缩放本身不会设置状态？我做了一些相同的操作，但是滚动缩放没有跟踪缩放状态。我不确定发生了什么，但是，当我尝试使用该方法时（通过材质ui）。它不起作用。然而，当我使用onClick by react传单控件时，它工作得非常好。现在，我打算在那里添加一个缩放方法，但我不知道如何调用传单的方法来进行放大或缩小。明白了，有几种方法可以解决这个问题。我将用这些例子更新我的答案，但他需要一些时间才能做出这些例子。现在，您可以使用道具设置地图缩放，并使用参考获取地图原始对象。它是否会跟踪滚动缩放，因为滚动缩放本身不会设置状态？我做了一些相同的操作，但是滚动缩放不跟踪缩放状态。