mapbox-gl 标记问题不粘答案

【问题标题】：mapbox-gl marker issue not stickingmapbox-gl 标记问题不粘
【发布时间】：2022-02-04 17:39:53
【问题描述】：

我正在研究 mapbox-gl 标记配置。当我添加标记时它无法正常工作，它位于页面底部，并且当我放大标记移动的地图时，放大和缩小也存在问题，标记移动不粘在其位置。这是我的实现

loadMap() {
    (mapboxgl as typeof mapboxgl).accessToken = 'pk.eyJ1Ijoic2F1ZmlrIiwi******************************wP1AfA5Xy0FNFLRMjntFg';

   

    // street view  ---  mapbox://styles/mapbox/streets-v11
    // setallite view  --- mapbox://styles/mapbox/satellite-v9
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11', 
      center: [-65.017, -16.457],
      zoom: 1
    });

    // Add markers to the map.

    // Create a DOM element for each marker.
    const el = document.createElement('div');
    const width = 40;
    const height = 40;
    el.className = 'marker';
    el.style.backgroundImage = `url(https://placekitten.com/g/${width}/${height}/)`;
    el.style.width = `${width}px`;
    el.style.height = `${height}px`;
    el.style.backgroundSize = '100%';

    el.addEventListener('click', () => {
      window.alert(`Text -message`);
    });


    // Add markers to the map.
    new mapboxgl.Marker(el)
      .setLngLat([-66.324462, -16.024695])
      .addTo(map);

  }

这是附加的图像，您可以在下图中看到标记位于底部。

【问题讨论】：

标签： typescript mapbox-gl angular11

【解决方案1】：

您可能缺少 mapbox-gl 的 js 和 css，请将它们放在 index.html 中，它会起作用。

 <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>

【讨论】：