传单库不适用于在地图上添加图像答案

【问题标题】：Leaflet library doesn't work for adding image on the map传单库不适用于在地图上添加图像
【发布时间】：2019-12-16 05:02:49
【问题描述】：

我在地图中添加了一张图片。现在我想添加另一张图片。

我想在第一张图片上添加另一张图片幻灯片。

我在第一张图片上滑动第二张图片 300x300 并添加。

但是下一张图片没有出现。为什么？

    <!DOCTYPE html>

<head>
    <title>Offline Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="styles/leaflet.css">
    <link rel="stylesheet" href="styles/leaflet-search.css">
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/leaflet-src-0.7.7.js"></script>
    <script src="scripts/leaflet-search.js"></script>
</head>

<body>

    <div id="map"></div>
    <span id="prout"></span>
    <span id="prout"></span>
    <script>

        var map = new L.Map('map', {
            zoom: 17,
            doubleClickZoom: false,
            center: new L.latLng([27.0827, 112.7804]),
            //maxBounds: [[48.780,2.200],[48.825,2.256]]
        });

        L.tileLayer('img/mapTiles/{z}/{x}/{y}.jpg', {
            maxZoom: 19
        }).addTo(map);


        var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
        topleft_LatLng = [27.08350, 112.78080];
        bottomright_LatLng = [27.08000, 112.78510];
        imageBounds1 = [topleft_LatLng, bottomright_LatLng];
        image1 = L.imageOverlay(imageUrl, imageBounds1);
        image1.addTo(map);
        //L.imageOverlay(imageUrl, imageBounds).bringToFront();

        /////////////////////////////////////////////////////////////////////////////////////////////////////
        var centerLatLng = map.getCenter(); // get map center [lat, lon]
        
        // pixel koordinatları
        var point_C = map.latLngToContainerPoint(centerLatLng); //[pointC.x, pointC.y] etc

        var point_X = [point_C.x + 1, point_C.y]; // add one pixel to x
        var point_Y = [point_C.x, point_C.y + 1]; // add one pixel to y
        
        var latLng_C = map.containerPointToLatLng(point_C); //[lat, lon] etc.
        var latLng_X = map.containerPointToLatLng(point_X); //[27.08350, 112.78080] etc.
        var latLng_Y = map.containerPointToLatLng(point_Y); //[27.08350, 112.78080] etc.

        var latLng_1_X = latLng_X - latLng_C;
        var latLng_1_Y = latLng_Y - latLng_C;

       /////////////////////////////////////////////////////////////////////////////////////////////////////

        var imageUrl = 'C:/etna.jpg';
        imageBounds = [topleft_LatLng + (latLng_1_X * 300), bottomright_LatLng + (latLng_1_Y * 300)];
        image = L.imageOverlay(imageUrl, imageBounds);
        image.addTo(map);
        image.bringToFront();


    </script>

</body>

</html>

我做错了什么？我正在尝试修复它。

this is what I see

https://i.postimg.cc/sx6hTxnL/1.png

【问题讨论】：

标签： javascript html leaflet geo

【解决方案1】：

罪魁祸首是（至少）var imageUrl = 'C:/etna.jpg'。

出于众所周知的安全原因，浏览器会阻止您从本地文件系统加载文件。

如果你打开浏览器开发者控制台，你会弹出一个错误信息。

您必须通过服务器提供您的图像，或者使用 Base64 编码将其嵌入到您的 HTML 文件中。

【讨论】：