时间戳

首页 > 解决方案 > Mapbox GL JS：绘制没有坐标的标记

javascript - Mapbox GL JS：绘制没有坐标的标记

问题描述

有谁知道在没有坐标的 Mapbox GL JS 中绘制标记的方法？

我正在地图上绘制一堆带有弹出窗口的标记，但我有一些标记我不想在任何精确位置绘制。理想情况下，它们只是坐在屏幕底部的一个盒子里，当你移动地图时它们不会移动。

我已经为他们制作了一个容器来放置在 HTML 上，现在我只需要将它们放入其中，这样它们就可以相对于网页（而不是地图）坐下。除非您能想到更简单的解决方法。

我的一个想法是将地图中的标记复制到 HTML 对象中，然后以某种方式重现弹出元素，因为它们与地图框标记一起出现。

这是JS的一点：

// create a HTML element for each feature
    var el = document.createElement('div');
    el.className = "marker" + " " + typeTag + " " + impactTag;
    el.innerHTML = '<i class="' + symbol + '"></i>';

    // exclude Global markers for now
    if (feature.properties['location'] !== 'Global') {

    // make a marker for each feature and add to the map
    new mapboxgl.Marker(el)
    .setLngLat(feature.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({ offset: 10, closeButton: false }) // add popups
    .setHTML('<h4 style="padding-bottom: 4px; border-bottom: 2px solid ' + colors[impactTag] + ';">' + feature.properties['title'] + '</h4><ul class="list-group list-tooltip"><li>Area of study: ' + feature.properties['location'] + '</li><li><div style="display:inline-block" class=' + impactTag + '>' + popupIcon[type] + "</div>"  
    + impactTag + " " + 'that.</li></ul><p class="summary">' 
    + summary + '</p><p class="citation"><a href="'
    + url + '" target="_blank">' + clipCitation + "),</a><span class='citation2'> " + feature.properties['journal'] + '</span></p>'))
    .addTo(map);
    }

    // plot Global markers within globalcontainer - this is where I'm stumped...
    else {
    
    }

标签： javascriptmapbox-gl-js

解决方案

您只需要 HTML 覆盖，而不是标记。最简单的方法是这样的：

<div id="map"></div>
<div id="overlay" style="position: absolute; top: 50px; left: 50px;">Overlay content here.</div>

推荐阅读