Question

我正在尝试更改动态更改的Marker的位置，该位置将我从json像素（以像素为单位）转换为度数。但是我遇到了以下错误：

containerPointToLatLng未定义no-undef react-leaflet

我尝试通过

导入containerPointToLatLng

import {L,containerPointToLatLng } from 'leaflet';

但这没用，有什么主意吗？

Answer 1

containerPointToLatLng是Map class的一种方法，下面的示例演示了如何在给出像素坐标的情况下放置标记

class MapExample extends React.Component {
  constructor(props) {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 8,
      markerPoint: {
        x: 733,
        y: 62
      }
    };
    this.refMap = React.createRef();

    this.setMarkerPos = marker => {
      const map = this.refMap.current.leafletElement;
      const m = marker.leafletElement;
      const markerLatLng = map.containerPointToLatLng(this.state.markerPoint);
      m.setLatLng(markerLatLng);
    };
  }


  render() {
    const { lat, lng, zoom } = this.state;
    const position = [lat, lng];
    return (
      <Map  ref={this.refMap}
        center={position} zoom={zoom}
      >
        <TileLayer 
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        />
        <Marker position={{lat:0,lng:0}} ref={this.setMarkerPos.bind(this)} />
      </Map>
    );
  }
}

Here is a demo供参考

如何使用react-leaflet containerPointToLatLng？

1 个答案: