Javascript 单张上未显示自定义标记
我用传单来展示地图。此外,我还使用传单传送机进行传送。路线显示正确,但标记未被车辆图标覆盖。我尝试了路由和反应传单覆盖标记使用divIcon,但没有成功 这是我的代码Javascript 单张上未显示自定义标记,javascript,reactjs,leaflet,react-leaflet,leaflet-routing-machine,Javascript,Reactjs,Leaflet,React Leaflet,Leaflet Routing Machine,我用传单来展示地图。此外,我还使用传单传送机进行传送。路线显示正确,但标记未被车辆图标覆盖。我尝试了路由和反应传单覆盖标记使用divIcon,但没有成功 这是我的代码 class CarRouting extends MapLayer { componentWillMount() { super.componentWillMount(); const { map, from, to, position, ...props } = this.props; props.i
class CarRouting extends MapLayer {
componentWillMount() {
super.componentWillMount();
const { map, from, to, position, ...props } = this.props;
props.icon = L.divIcon({
className: 'my-div-icon',
});
this.leafletElement =
L.Routing.control({
position: 'topleft',
waypoints: [
L.latLng(from[0], from[1]),
L.latLng(to[0], to[1]),
],
}).addTo(map);
const source = L.marker([from[0], from[1]], props);
const destination = L.marker([to[0], to[1]], props);
const cities = L.layerGroup([source, destination]);
}
render() {
return null;
}
}
export default CarRouting;
car-result.js
const icon = divIcon({
className: 'my-div-icon',
iconSize: [30, 30]
});
return (
<Map center={position} zoom={5} style={{ height: 600 }}>
<TileLayer
url='https://mt{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}'
subdomains='0123'
/>
<Marker position={position} icon={icon} />
<CarRouting from={[cityOrigenLat, cityOrigenLng]} to={[cityDestinoLat, cityDestinoLng]} />
</Map>
);
};
我错过什么了吗
更新
路线现在也被破坏了,标记仍然没有被汽车图像覆盖
我还没有测试过,但通过查看您的代码,我认为您应该使用L.marker(位置、道具)。addTo(地图)我刚才正在这样做,我收到了您的消息:)。我会让你知道它是否有效。它不起作用,现在路由也被破坏。先将你的标记添加到地图,然后添加路由层。这可能会纠正路由问题。您能给jsfiddle.net吗?
.my-div-icon {
background: url('../../../public/assets/img/icons/shared_car.png');
background-size: contain;
background-repeat: no-repeat;
width: 25px;
height: 25px;
}