4

如何向地图区域添加填充？

正如您在屏幕截图中看到的那样，div顶部覆盖了一个黄色，并且弹出窗口出现在其下方，所以我想给地图区域 100px 的顶部填充，以便弹出窗口下降到一边。提前致谢。

在此处输入图像描述

下面的代码：

        <div id="map" class="map"></div>
            <script>
                mapboxgl.accessToken = 'pk.xxxxxx';
                var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/xxxxxx/cj5jggnud0m5g2soxqalq8z3n',
                zoom: 3,
                center: [50.075,26.136]
                });

                var geojson = {
                  type: 'FeatureCollection',
                  features: [


                  {
                    type: 'Feature',
                    geometry: {
                      type: 'Point',
                      coordinates: xx.xxxxx,xx.xxxxxx }}]
                    },
                    properties: {
                      title: 'Egypt',
                      description: 'Item One Item Two Item Three'
                    }
                  }

                 ]
                };

                // add markers to map
                geojson.features.forEach(function(marker) {

                    // create a HTML element for each feature
                    var el = document.createElement('div');
                    el.className = 'marker';

                    // make a marker for each feature and add to the map
                    new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
                    .setLngLat(marker.geometry.coordinates)
                    .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
                    .setHTML('<div class="map-marker"><h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p></div>'))
                    .addTo(map);
                });

                // disable map zoom when using scroll
                map.scrollZoom.disable();
                // Add zoom and rotation controls to the map.
                var nav = new mapboxgl.NavigationControl();
                map.addControl(nav, 'bottom-right');

            </script>
4

2 回答 2

0

这是一个很老的问题，但也许这有助于谷歌搜索。

最简单的解决方案归结为将地图的中心向下移动 100 像素。由于地图的中心是 lnglat 格式，您首先必须将其转换为 px 值，添加 100px，然后再转换回 lnglat。您可以使用对象上的project和unproject方法来做到这一点map。project将 lnglat 转换为 px，unproject反之亦然：

const [x, y] = project(map.getCenter())
map.setCenter(unproject([x, y + 100]))

当您有可拖动的地图时，此解决方案很有用。BoundingLngLat如果您有一个包含一堆您都希望在视口中可见的功能，它可能不是您想要的。由于您从地图底部损失了 100 像素，因此要素可能最终会出现在视口之外。在这种情况下，您可以LngLatBounds使用相同的机制将 100px 的东北 lnglat 向上移动：

const [x, y] = project(bounds.getNorthEast())
bounds.setNorthEast(unproject([x, y - 100]))
map.fitBounds(bounds)
于 2021-02-09T07:29:11.970 回答
-1

我面临同样的问题，我以这种方式解决：

map.flyTo({
   center: [lng, lat + (window.innerHeight / 1000000.0)], //800 px / 100000
   zoom: 17
});

当用户单击地图时，我添加了一个标记并缩放到该位置，顶部的填充很小

(window.innerHeight / 1000000.0).
于 2018-07-04T12:30:23.117 回答