时间戳

首页 > 解决方案 > Mapbox GL JS 自定义标记偏移

mapbox-gl-js - Mapbox GL JS 自定义标记偏移

问题描述

我按照这个 Mapbox 教程制作了一张带有自定义标记的地图。https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/

在这段代码的某个地方，我应该能够调整标记的偏移量，因为标记根本没有放在坐标上。

var geojson = {
  type: 'FeatureCollection',
  features: [{
  type: 'Feature',
  geometry: {
  type: 'Point',
  coordinates: [31.442553,31.656087]
  },
  properties: {
  title: 'Diametta, Egypt',
  description: 'Horus Academy'
    }
  }]
};

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/torkjellt/ckdpx4l7r0n5c1inwgw0pl1pq',  
location
center: ([30.71, 30.41]), // starting position [lng, lat]
zoom: 5 // starting zoom
});

geojson.features.forEach(function(marker) {
var el = document.createElement('div');
el.className = 'marker';

new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 5 }) // add popups
.setHTML('<strong>My spot</strong><br>Egypt'))
.addTo(map);
});

关于在哪里调整偏移量的任何想法？

标签： mapbox-gl-js

解决方案

该值offset应该是 a PointLike，因此是一个数组：

.setPopup(new mapboxgl.Popup({ offset: [0, -5] }) // 5 pixels upwards

推荐阅读