我使用 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函数不会被触发,即使位置在地图中被更新,我也找不到我遗漏了什么。这里是这个软件包的源代码链接。
如果有谁能给我一个提示,我将感激不尽。
你正在通过一个 选择权 名为 _onLocationFound
也就是 不 在...上 Leaflet.LocateControl支持的选项列表。.
你这样做可能是因为你看了Leaflet.LocateControl的代码,并混淆了这个代码。onLocationError
选择权 随着 _onLocationError
办法,而没有注意到 _onLocationError
办法 明确地调用其同名的 选择权 此处...
_onLocationError: function(err) {
/* snip */
this.options.onLocationError(err, this);
},
...但你没有意识到,没有... ... onLocationFound
选择权 根本,而且内部 _onLocationFound
办法 不调用任何用户提供的回调。根本.
相反,做 文路: 杠杆作用 locationfound
事件 在地图上。