要在Angular 9中使用MapboxGeocoder添加标记,可以按照以下步骤操作:
npm install mapbox-gl @mapbox/mapbox-gl-geocoder
import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
ngOnInit() {
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN_HERE';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
});
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
marker: {
color: 'orange'
},
mapboxgl: mapboxgl
});
map.addControl(geocoder);
}
确保将YOUR_ACCESS_TOKEN_HERE替换为您的Mapbox访问令牌。
geocoder.on('result', function(ev) {
const marker = new mapboxgl.Marker({
color: 'orange'
})
.setLngLat(ev.result.center)
.addTo(map);
});
这将在选择地点时将一个橙色标记添加到地图上。
请确保在HTML文件中添加一个具有id为"map"的div元素,以便地图显示在其中。
通过按照以上步骤,您应该能够在Angular 9中使用MapboxGeocoder添加标记。