[英]Change the default blue marker to my own icon marker, mapbox angular
I'm trying to change the default blue marker to my own type, I am running into problems because the documentation refers to changing multiple markers, I will always just have one one marker viewed in my map.我正在尝试将默认的蓝色标记更改为我自己的类型,我遇到了问题,因为文档中提到了更改多个标记,我将始终在我的 map 中查看一个标记。 Is there a way to do it?
有没有办法做到这一点? The map is loading but now showing no markers, so I am close, but no cigar.
map 正在加载,但现在没有显示任何标记,所以我很接近,但没有雪茄。 I want to use ALARM_CENTER.svg icon.
我想使用 ALARM_CENTER.svg 图标。
component.ts:组件.ts:
createMap(lng: number, lat: number, zoom: number, createMarker: boolean) {
this.mapa = new mapboxgl.Map({
accessToken: environment.mapBox,
container: 'mapElement',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat], // starting position [lng, lat]
zoom: zoom,
attributionControl: false,
});
createMarker ? this.createMarker(lng, lat) : '';
}
createMarker(lng: number, lat: number) {
var el = document.createElement('div');
el.className = 'marker';
new mapboxgl.Marker({element: "<div class='marker'>"}).setLngLat([lng, lat]).addTo(this.mapa);
}
style.css:样式.css:
.marker {
background-image: url("/assets/shopProtection/ALARM_CENTER.svg");
background-size: cover;
width: 50px;
height: 50px;
cursor: pointer;
}
It was a combination of things, I put the css in the main style.css, not the component.css, something to do with lazy component not loading styles in the component.css. It was a combination of things, I put the css in the main style.css, not the component.css, something to do with lazy component not loading styles in the component.css. Final code:
最终代码:
component.ts组件.ts
createMarker(lng: number, lat: number) {
var el = document.createElement('div');
el.className = 'marker';
const marker = new mapboxgl.Marker(el).setLngLat([lng, lat]).addTo(this.mapa);
}
style.css:样式.css:
.marker {
background-size: contain;
width: 50px;
height: 50px;
background-image: url("/assets/img/marker.svg");
background-repeat: no-repeat;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.