_onLocationFound 在 leaflet.locationcontrol 中不起作用。

问题描述 投票:0回答:1

我使用 leaflet.locatecontrol 来获取用户在地图中的位置,但是 _onLocationFound 不能工作。这里是我的地图组件。

      <Map
        ref={ref}
        center={initialState ? initialState.center : DEFAULT_CENTER}
        zoom={initialState ? initialState.zoom : 5}
        maxZoom={18}
        onMove={(e) => {
          onMapMove(e);
        }}
      >
        <TileLayer
          url={`${settings.getConfig().MAP_TILE_URL}${
            settings.getConfig().MAP_X_API_KEY
          }`}
          attribution={settings.getConfig().MAP_ATTRIBUTION}
        />
        {marker && (
          <Marker
            position={marker}
            icon={L.icon({
              iconUrl: "https://webstockreview.net/images/map-icon-png-6.png",

              iconSize: [25, 30], // size of the icon
              iconAnchor: [13, 36], // point of the icon which will correspond to marker's location
            })}
          />
        )}
        <LocateControl options={locateOptions} />

      </Map>

这是我传递给LocateControl的选项。

  position: "bottomright",
  icon: "map-location-icon",
  strings: {
    title: "my location",
  },
  onLocationError: function (e) {
    console.log(e);
    console.log("Location access denied.");
  },
  _onLocationFound: function (e) {
    console.log("event", e);
  },

  onActivate: () => {}, // callback before engine starts retrieving locations
}

LocateControl是我实现的一个简单的组件,用来分离逻辑,下面是它的代码。

import { withLeaflet } from "react-leaflet";
import Locate from "leaflet.locatecontrol";

class LocateControl extends Component {
  componentDidMount() {
    const { options, startDirectly } = this.props;
    const { map } = this.props.leaflet;

    const lc = new Locate(options);

    lc.addTo(map);

    if (startDirectly) {
      // request location update and set location
      lc.start();
    }
  }

  render() {
    return null;
  }
}

export default withLeaflet(LocateControl);

我的问题是,我想在找到位置时保存它,但_onLocationFound函数不会被触发,即使位置在地图中被更新,我也找不到我遗漏了什么。这里是这个软件包的源代码链接。

如果有谁能给我一个提示,我将感激不尽。

javascript reactjs leaflet react-leaflet
1个回答
1
投票

你正在通过一个 选择权 名为 _onLocationFound 也就是 在...上 Leaflet.LocateControl支持的选项列表。.

你这样做可能是因为你看了Leaflet.LocateControl的代码,并混淆了这个代码。onLocationError 选择权 随着 _onLocationError 办法,而没有注意到 _onLocationError 办法 明确地调用其同名的 选择权 此处...

    _onLocationError: function(err) {
        /* snip */
        this.options.onLocationError(err, this);
    },

...但你没有意识到,没有... ... onLocationFound 选择权 根本,而且内部 _onLocationFound 办法 不调用任何用户提供的回调。根本.

相反,做 文路: 杠杆作用 locationfound 事件 在地图上。

© www.soinside.com 2019 - 2024. All rights reserved.