标记传单不会在反应组件中呈现_反应传单答案

【问题标题】：marker leaflet doesnot render in react component _ React leaflet标记传单不会在反应组件中呈现_反应传单
【发布时间】：2023-03-28 11:58:01
【问题描述】：

这是我的传单地图组件。当用户点击地图时，我想获得到达坐标。我可以正确获取我的坐标，但我也需要在地图上标记渲染。

<Map
        center={[35.4090, 51.1555]}
        zoom={18}
        maxZoom={20}
        attributionControl={true}
        zoomControl={true}
        onClick={this.handleClick}
        doubleClickZoom={false}
        scrollWheelZoom={true}
        dragging={true}
        animate={true}
        easeLinearity={0.35}
    >

        <Marker position={this.state.points === '' ? this.state.points : [35.4090, 51.1555]} icon={pointerIcon} key={this.state.points}>
            <Popup position={this.state.points}>
                Popup for any custom information.
                </Popup>
        </Marker>

    </Map>

 handleClick = (e) => {
        const { lat, lng } = e.latlng;
        this.setState({points: [lat,lng]})
    }

这是自定义图标。

import marker from '../../css/mapMarker.png'
import L from 'leaflet'

export const pointerIcon = new L.Icon({
    iconUrl: {marker},
    iconRetinaUrl: {marker},
    iconAnchor: [5, 55],
    popupAnchor: [10, -44],
    iconSize: [25, 55],
    shadowSize: [68, 95],
    shadowAnchor: [20, 92],
})

【问题讨论】：

标签： reactjs leaflet

【解决方案1】：

在提供的示例中，iconUrl 和 iconRetinaUrl 属性作为对象值传递：

export const pointerIcon = new L.Icon({
    iconUrl: {marker},  
    iconRetinaUrl: {marker},
    //..
})

而对于 L.icon，它们应该作为 String 值提供，这很可能是无法显示标记的原因

所以，要么修改示例以将属性初始化为字符串数据：

export const pointerIcon = new L.Icon({
    iconUrl: marker,  
    iconRetinaUrl: marker,
    //..
})

或将Url指定为属性值，例如：

export const pointerIcon = new L.Icon({
    iconUrl: "https://maps.google.com/mapfiles/kml/pushpin/red-pushpin.png",  
    //..
})

Here is a demo

【讨论】：