How to render multiple markers from an array of coordinates in react leaflet
正如标题所说,我正试图使用react传单在地图上绘制多个标记。我正在收集从BE响应接收到的所有坐标,并将它们放入一个数组中。渲染组件时,我只看到没有标记的贴图。所以我可能错过了什么。
这是我的代码:
var arrCoordinates = [[/* coordinates 1 */], [/* coordinates2 */]...[/* coordinates n */]] function MultipleMarkers(){ const map = useMapEvent({ click(){ map.locate() } }) return arrCoordinate.map(coordinata => { <Marker position={coordinata} icon={new Icon({iconUrl: marker, iconSize: [25, 41], iconAnchor: [12, 41]})}> <Popup>{Object.keys(elem).length > 0 ? elem.bodyfindSegnalazione[0][0].indirizzo + ' ' + elem.bodyfindSegnalazione[0][0].civico + ' ' + elem.bodyfindSegnalazione[0][0].quartiere : ''}</Popup> </Marker> }) } return ( <div id="mapid" style={{display: showMap}}> <MapContainer center={center} zoom={12} scrollWheelZoom={true} style={{ height: "100%", width: "100%" }} > <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <MultipleMarkers /> </MapContainer> </div> );如果有任何建议,我将不胜感激,提前谢谢。
url(iconUrl:marker)正确吗?删除图标选项,看看它是否有效。
谢谢你的回复,但是@kboul帮我弄明白了为什么它不起作用!顺便说一句,图标选项已损坏,但无论如何,谢谢!
标准答案
您缺少的是前面的返回语句。
应该是的
function MultipleMarkers() { const map = useMapEvent({ click() { map.locate(); } }); return arrCoordinates.map((coordinata) => { return ( <Marker position={coordinata} icon={new Icon({iconUrl: marker, iconSize: [25, 41], iconAnchor: [12, 41]})}> <Popup>{Object.keys(elem).length > 0 ? elem.bodyfindSegnalazione[0][0].indirizzo + ' ' + elem.bodyfindSegnalazione[0][0].civico + ' ' + elem.bodyfindSegnalazione[0][0].quartiere : ''}</Popup> </Marker> ); }); }谢谢这帮我弄明白了为什么那些记号笔没有炫耀。看起来我是在反转阵列中的纵横坐标。谢谢你的帮助!我真的很感激!祝您愉快,先生!