Mabox gl-js标记翻译位置

Question

我正在尝试使用https://www.mapbox.com/mapbox-gl-js/api/#marker

const el = document.createElement('div');
el.className = 'marker';
const marker = new mapboxgl.Marker(el, {
color: '#FFFFFF',
draggable: true,
offset: [0, 0],
})
.setLngLat([0, 0])
.addTo(this.map);

哪个连接到地图：

this.map = new mapboxgl.Map({
container: this.mapEl,
center: [this.props.longitude, this.props.latitude],
zoom: this.props.zoom,
maxZoom: 17,
pitch: this.props.pitch || 0,
bearing: this.props.bearing || 0,
style: getStyleByTheme(this.props.theme),
preserveDrawingBuffer: true,
attributionControl: false,
});

问题是标记位置正在被"转换"为具有巨大值：transform: translate(-50%, -50%) translate(225173px, 75290px);

通过调试这个计算，我发现问题发生在这一行：https://github.com/mapbox/mapbox-gl-js/blob/e0c4d4679d06be7c0f51970b26a184f8d9ed6d5b/src/ui/marker.js#L338

所以我更进一步：

this.map.project(marker.getLngLat())._add(marker.getOffset())

返回{x: 225173.2033574923, y: 75289.74831606582}

通过去掉函数_add的调用并输出this.map.project(marker.getLngLat())的值，我得到了相同的值。

所以，这实际上发生在这里：https://github.com/mapbox/mapbox-gl-js/blob/e0c4d4679d06be7c0f51970b26a184f8d9ed6d5b/src/ui/map.js#L616

这让我想到https://github.com/mapbox/mapbox-gl-js/blob/7b4be8d247c7351df83316eed0f8d20d3a184722/src/geo/transform.js#L314

哦，天哪，我现在迷路了

这里可能有什么问题？是Mapbox gl-js、我的地图设置还是事件html结构？

请帮忙。：(

Answer 1

好吧，我想通了——这完全是我的错！

正如文件中所说——https://www.mapbox.com/mapbox-gl-js/api/#map#project返回一个点，表示与指定地理位置相对应的、相对于地图容器的像素坐标。

我使用的是.setLngLat([0, 0])，但地图实际上指向了不同的位置。

通过使用，与地图居中的LngLat相同，我解决了这个问题。：(