reactjs - 标记传单不会在反应组件中呈现_反应传单
问题描述
这是我的传单地图组件。当用户点击地图时,我想获得到达坐标。我可以正确获取我的坐标,但我也需要在地图上标记渲染。
<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],
})
解决方案
在提供的示例 中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",
//..
})
推荐阅读
- odbc - 任何人都知道“如何通过 ODBC 将 Power Bi Cloud 版本与 Netsuite 连接?”
- pycharm - pycharm double shift不仅打开“到处搜索”还把中文输入法改为全角
- mongodb - Spring数据MongoDB获取文档接近给定日期和时间
- c# - Paypal 发布到 C# REST API 端点
- c# - c#中生成的文本框自动编号错误
- javascript - 使用箭头键上下滚动
- php - php - 未调用 stream_context_set_params() 中的通知
- spring-security - 安全考虑:struts 1.x 的 spring-struts 使用
- python-3.x - 如何使用返回整数值编写多个 If-Else
- javascript - async/await 函数中的 JavaScript Promise 解析最终响应数组