Question

我试图通过传单展示我的形象。我的HTML和图像文件位于同一文件夹中。我的图片尺寸 1920x1080

我从网上搜索过，我写了这段代码：

<div id="map"></div>
<script>
    var map = L.map('map', {
    maxZoom: 20,
    minZoom: 20,
    crs: L.CRS.Simple
    }).setView([0, 0], 20);

    var imageUrl = 'test.jpg';
    var southWest = map.unproject([1920, 0], map.getMaxZoom());
    var northEast = map.unproject([0, 1080], map.getMaxZoom());

    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

    var imageBounds = [[1920, 0], [0, 1080]];

    L.imageOverlay(imageUrl, imageBounds).addTo(map);
</script>

地图有风格：

<style>
    #map { height: 480px; }
</style>

当我打开我的HTML文件时，传单只显示灰色背景。

我错过了什么吗？

Answer 1

您不需要unproject()坐标。

unproject将地图坐标转换为屏幕像素坐标。 您不想这样做，除非您正在测量屏幕像素或在屏幕上定位自定义元素。

如果不查看实际示例，我只能猜测您是否将地图的边界设置为图像覆盖范围之外的区域。

Leaflet不会将本地图像显示为覆盖

1 个答案: