我正在尝试使用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
哦,天哪,我现在迷路了
这里可能是什么问题?是Mapbox-gl-js,我的地图设置还是事件html结构?
请帮助。 :)
答案 0 :(得分:0)
好吧,我知道了-这完全是我的错!
如文档此处所述-https://www.mapbox.com/mapbox-gl-js/api/#map#project “返回一个点,该点表示相对于地图容器的,对应于指定地理位置的像素坐标。”
我使用的是.setLngLat([0, 0])
,但地图实际上指向的是其他位置。
通过使用与地图中心相同的LngLat,我解决了此问题。 :)