【发布时间】：2020-09-29 18:12:03
【问题描述】：
我一直在开发一个地图组件，该组件呈现从搜索中流入的结果点。我已经完成了大部分工作，直到我开始为 return 语句传递道具。我使用的是我自己的组件，而不是 react-leaflet 的。我注意到如果我使用<Map ... /> 并使用props.locations.map( ... 渲染它工作正常。如果我用<map ref={map} > 引用我的map = L.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>
对此我感到很困惑。为什么使用<Map>时可以映射和渲染<Markers>而不是我的<map />？
编辑： 使用 <Map ref={map} ... /> 的屏幕截图。添加重复图层，使 80% 的地图不可拖动。
【问题讨论】：
-
你需要使用 react-leaflet 的
Map组件或者使用 vanilla 传单来初始化地图。使用本机传单代码初始化地图并使用 react-leaflet 的抽象组件然后是没有意义的。使用react-leaflet的地图组件和mapRef。 -
中添加屏幕截图
-
也许它与我的第一个 div，如果我删除它，我得到错误：找不到地图容器。你能做一个演示来重现这个问题吗？无法做到这一点，我尝试过，但丝毫不知道我在 codepen 中做什么。如果还不是很明显，那么我对这一切都是新手。上面提供的代码将通过将
标签： javascript html reactjs leaflet react-leaflet