javascript - 反应在地图上定位
问题描述
我想在 Map 上添加模块“React-leaflet-locate-control”。不幸的是,我有这个错误“TypeError:无法读取未定义的属性'addLayer'”,我不知道如何纠正这个错误。
你能帮我吗 ?
这是我的组件地图:
import './Map.css';
import React, { Component } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import L from "leaflet";
import { getLat, getLng } from '../../Store.js';
import SearchBar from '../SearchBar/SearchBar.js';
import LocateControl from 'react-leaflet-locate-control';
const customMarker = new L.icon({
iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
iconSize: [25, 41],
iconAnchor: [13, 0]
});
export default class MapLeaflet extends Component {
constructor(props) {
super(props);
this.state = {
lat: getLat(),
lng: getLng(),
}
}
updateMarker = (e) => {
this.props.updateMarkerPosition(e.latlng.lat, e.latlng.lng);
this.setState({
lat: e.latlng.lat,
lng: e.latlng.lng
})
}
render() {
const position = [this.state.lat, this.state.lng]
const locateOptions = {
position: 'topright',
strings: {
title: 'Show me where I am, yo!'
},
onActivate: () => {} // callback before engine starts retrieving locations
}
return (
<div className="map">
<Map center={position} zoom={13} className="map" onClick={this.updateMarker}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position} icon={customMarker}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
<SearchBar />
<LocateControl options={locateOptions} startDirectly/>
</Map>
</div>
)
}
}
解决方案
react-leaflet-locate-control
软件包与最新版本 (v2) 不兼容,react-leaflet
实际上已在此处报告了类似问题
由于react-leaflet-locate-control
代表leaflet-locatecontrol
插件的包装器,因此可以使用以下自定义组件react-leaflet
来代替,它提供与以下相同的功能react-leaflet-locate-control
:
import React, { Component } from "react";
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);
安装
1)安装插件:
npm install leaflet.locatecontrol
2) 将以下 CSS 资源包含到
public/index.html
:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css">
推荐阅读
- geometry - 用入射矢量计算故障矢量
- algorithm - 可分离函数在多个维度上更难最小化的直观原因
- php - 尝试使用在技术上不是 API 的 JSON API
- ruby-on-rails - 未定义的方法“whiteboards_path”
- jestjs - babel-jest 不能在 jest 上正确运行
- python - 如何从 txt 文件数据解析成结构化的 JSON 文件
- python - Browsermob - Python - Windows Java 进程在 proxy.close 和 server.stop 之后保持运行
- c# - 如何将参数传递给 RazorPage OnGet()?
- javascript - 在 JavaScript/jQuery 中向 API 发出 POST 请求
- java - 我的 Javafx 按钮方法不起作用,不知道为什么