如何解决React Leaflet：动态标记，无法读取属性“ addLayer”
我一直在研究一个地图组件，该组件呈现从搜索流中而来的结果点。我已经完成了大部分工作，直到我开始将道具传递给return语句为止。我使用的是我自己的组件，而不是react-leaflet的组件。我注意到如果我使用<Map ... />并用props.locations.map( ...进行渲染，则效果很好。如果我用map = L.map(...)引用我的<map ref={map} >并尝试用道具渲染<Marker .../> ，则它会在尝试创建图层并将其添加到地图时立即中断。
组件的JS文件如下：
import React,{Component,useEffect,useState} from "react";
import {Map,Marker,Popup,TileLayer} from "react-leaflet";
import * as L from 'leaflet'
import 'leaflet-draw'
import 'leaflet/dist/leaflet.css';
import 'leaflet-easybutton'
import 'leaflet-easybutton/src/easy-button.css';
import Style from './MapSearch.css'
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
const MapSearch = (props) => {
const [layers,setLayers] = useState([]);
const [results,setResults] = useState([]); //Not used
const [map,setMap]=useState({});
useEffect(()=> {
console.log('mounted');
let map = L.map('mapsearch').setView([51.505,-0.09],6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',}).addTo(map);
/** Add the feature group and draw control to the map. */
let drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
position: 'topright',draw: {
polyline: false,rectangle: false,circlemarker: false,polygon: false,circle: true,marker: true,},edit: {
featureGroup: drawnItems,remove: true,});
map.addControl(drawControl);
/** On shape drawn,add the new layer to the map. */
map.on(L.Draw.Event.CREATED,(e) => {
const type = e.layerType;
const layer = e.layer;
if (type === 'marker') {
layer.bindPopup('popup');
}
console.log('LAYER ADDED:',layer);
drawnItems.addLayer(layer);
// this.setState({layers: drawnItems.getLayers()});
let testArr=drawnItems.getLayers(); /**BROKEN SECTIoN TODO */
// setLayers(layers=> [...layers,layer]);
//console.log({layers});
console.log('GEO JSON',drawnItems.toGeoJSON());
console.log(' LAYERS',drawnItems.getLayers());
});
L.easyButton('fa-search',() => {
isWithinPolygon(props); //Removed because not relevant to question
},'Search Current Results within drawn layers',{position: 'topright'}).addTo(map);
map.on(L.Draw.Event.EDITED,(e) => {
const layers = e.layers;
let countOfEditedLayers = 0;
console.log('LAYER EDITED:',layers);
layers.eachLayer((layer) => {
countOfEditedLayers++;
});
});
setMap(map); //hook to set map
//this.setState({map: map});
console.log("map:",{map}); },[]);
return (
<div id='mapsearch'>
<map center={[0,0]} zoom={0}>
{props.locations.map(marker => (
(marker.props.isLocationEnabled === true ?
(marker.props.isMarkerClicked === true ?
(<Marker
key={marker.props.id}
position={ [
marker.props.lat,marker.props.long
]}
opacity= '1.0'>
<Popup>
<b>Media ID:</b> {marker.props.values.mediaId}
<br/>
<b>Created Date:</b> {marker.props.values.createdDate}
<br/>
<b>Media URL:</b> <button onClick={()=> window.open(marker.props.values.mediaURL)}>Link</button>
</Popup>
</Marker>) :
(<Marker
key={marker.props.id}
position={ [
marker.props.lat,marker.props.long
]}
opacity= '0.5'>
<Popup>
<b>Media ID:</b> {marker.props.values.mediaId}
<br/>
<b>Created Date:</b> {marker.props.values.createdDate}
<br/>
<b>Media URL:</b> <button onClick={()=> window.open(marker.props.values.mediaURL)}>Link</button>
</Popup>
</Marker>)
) : (<div></div>)
)
))}
</map>
</div>
);
};
export default MapSearch;
索引：
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Media Search UI"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico","%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
对此颇为困惑。为什么在使用<Markers>而不是我的<Map>时会映射并渲染<map />？
编辑：使用<Map ref={map} ... />的屏幕截图。添加重复图层，使80％的地图不可拖动。
解决方法
因此，正如我在评论中提到的，您应该使用react'leaflet的Map并使用ref使用本机传单代码添加您想要的任何插件。
...other imports
const mapRef = useRef();
<Map center={position} zoom={13} style={{ height: "100vh" }} ref={mapRef}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
... your code should go here regarging markers
</Map>
，然后在组件安装时在useEffect上获取地图引用，并相应地使用它来初始化其他任何传单插件：
useEffect(() => {
console.log("mounted");
if (mapRef && mapRef.current) {
const map = mapRef.current.leafletElement;
/** Add the feature group and draw control to the map. */
let drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
position: "topright",draw: {
polyline: false,rectangle: false,circlemarker: false,polygon: false,circle: true,marker: true
},edit: {
featureGroup: drawnItems,remove: true
}
});
map.addControl(drawControl);
...
setMap(map); //hook to set map
//this.setState({map: map});
console.log("map:",{ map });
}
},[]);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
